こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

css 各divの内容を上に揃えたいです。

こんにちは、初心者です。宜しくお願いします。
<main>の右は<side2>ですが、mainの画像BBBの真横に、side2の内容が表示されず、真横ではなくて、BBBのやや斜め右下に表示されるんです。
全体を中央揃えにしてから、このような問題にぶつかりました。
mainとside2の内容を上先頭で揃え、ブラウザの大きさを変えても中央を基準に内容も動くようにしたいです。
ご教授のほど、よろしくお願い致します。

----------------------------------------------
<html>
<head>
<title>○○</title>
<link href="design/shop_index02.css" rel="stylesheet" type="text/css">
</head>
<body>

<div class="contents">

<div class="top">
<h1>○○</h1>
<h2>
○○</h2>
</div>

<div class="middle">
<a href="○○">
<img src="../img/logo.gif"></a>
</div>

<div class="main">
<a href="●●">
<img src="BBB"></a>
</div>

<div class="side2">
<a href="●●">
<img src="●●.gif"></a>
<h3>●●</h3>
<p>●●</p>
</div>

</div>
</body>
</html>

----------------------------------------------
/*ページのレイアウト用css*/

body{
margin:0px;
padding:0px;
background-color:#BDB76B;
text-align:center;
}

body a img{
border: none;
}

.contents{
width:900px;
height : 2700px;
background-image:url(○○);
margin:auto;
text-align:left;
clear:both;
}

h1{
color:#c0c0c0;
font-size:12px;
text-align:center;
font-family:"MS 明朝";
}

h2{
font-size:10px;
font-family:"MS P明朝","細明朝",serif;
color:#c0c0c0;
margin-left:8px;
}

h2 a{
font-family:"MS ゴシック","osaka,sans-serif";
font-size:10px;
color:#CC6600;
}

h3{
font-size:13px;
font-family:"MS P明朝","細明朝",serif;
color:#669900;
}

h3 img{
margin-left:720px;
}

.top{
width:900px;
height:170px;
margin-left:80px;
}

.middle{
width:900px;
height:170px;
margin-left:100px;
color:#999999;
margin-top:40px;
}

.main {
width:700px;
margin-top:60px;
margin-left:80px;
float:left;
}

.side2{
width:200px;
margin-top:60px;
margin-left:700px;
}

.side2 p{
color: #999999;
font-family:"MS P明朝","細明朝",serif;
font-size:10px;
width:160px;
text-align:left;
}

.side2 a{
color:#CC6600;
text-decoration:none;
}

投稿日時 - 2007-09-13 02:33:43

QNo.3340453

すぐに回答ほしいです

質問者が選んだベストアンサー

こんにちは

【IE】
.middleの部分で .middle width:900px; margin-left:100px;でcontents幅は1000pxとなっていますが
.main width:700px; margin-left:70px;と
.side2 width:200px; margin-left:700px;で
合計1670pxとなっていますので.mainでfloat:left;してもcontents幅より大きいので下に追いやられてしまっているわけです

#1様の言うようにmargin-leftを消すかその分だけdivの幅を減らすかしてください

これで900pxとなりますが実際に横に並べる為にはcontentsの幅は903px必要になります
これは<div>と<div>の間に見えない(消せない?)隙間があるためです

【Firefox,Opera】
IEでは.mainだけにfloat:left;すれば回りこみますがこちらは回り込まないので.side2にもfloat:left;を入れる必要があります(IEでも入れると900pxで並べられます)

IEではmargin-leftした分だけcontents幅が増えますがこちらは増えませんのでmargin-left分だけcontentsより表示がはみ出ることになります

paddingでした場合も同様
このはみ出しを表示させないようにするにはcontentsにoverflow:hidden;をいれます

投稿日時 - 2007-09-13 21:54:30

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

divに付いているmargin-leftは全部取ってしまう。
side2にfloat-leftを追加。
これで上手くいくと思います。

下のサイトに色々と解説があるので目を通しておいて下さい。

参考URL:http://desperadoes.biz/style/dan/index.php

投稿日時 - 2007-09-13 10:08:11

あなたにオススメの質問