HTML&CSS DIVをぴったりと縦に並べたい

質問

HTML&CSS初心者です。
下記のソース様に、DIVで一つにまとめたBOXを縦に並べたいのですが、
「見出し002」の上のマージンがうまく取れずに困っています。

.box内のphoto00.jpgをフロートにしている為、フロートが悪さをしている事を考え、
「見出し002」の上のDIV内に<br style="clear: both;" />を入れると、余白が生まれるのですが、
MacのSafariとFirefoxでは、余白の差が出てしまいます。（Safariの方が余白が大きい）
<br style="clear: both;" />を入れないと、上のマージンはほぼ消えてしまい、わずかにFirefoxの方では余白が生まれます。

ちなみにこの現象は「ここにテキストが入ります。」の行数を減らすと解決するのですが、
下記のソースでも、photo00.jpgの高さをはみ出す行数ではない為、この<div class="box">に
変な膨らみを持たせたくありません。

どなたか解決法を教えて下さい。よろしくお願い致します。

【HTML】
<div id="main">
<div class="mds01"><h3><em>見出し001</em></h3></div>

<div class="box">
<img src="img/photo00.jpg" width="155" height="108">
<h5>小見出し</h5>
<p class="txt">ここにテキストが入ります。<br><br>
ここにテキストが入ります。<br>
ここにテキストが入ります。</p>
</div>

<div class="box">
<img src="img/photo00.jpg" width="155" height="108">
<h5>小見出し</h5>
<p class="txt">ここにテキストが入ります。<br><br>
ここにテキストが入ります。<br>
ここにテキストが入ります。</p><br style="clear: both;" />
</div>

<div class="mds02"><h3><em>見出し002</em></h3></div>

<div class="box">
<img src="img/photo00.jpg" width="155" height="108">
<h5>小見出し</h5>
<p class="txt">ここにテキストが入ります。<br><br>
ここにテキストが入ります。<br>
ここにテキストが入ります。</p>
</div>

</div>

【CSS】
/*メイン大枠部分*/
#main {
margin: 0px;
padding: 0px;
width: 627px;
float: right;
background: #FFFFFF;
height: auto;
}
/*各見出し*/
.mds01 h3 {
background: url(img/mmds01.gif) no-repeat;
margin: 25px 0px 15px;
padding: 0px;
height: 20px;
width: 587px;
font-size: 9px;
color: #FFFFFF;
clear: left;
float: none;
}
.mds02 h3 {
background: url(img/mmds02.gif) no-repeat;
margin: 25px 0px 15px;
padding: 0px;
height: 20px;
width: 587px;
font-size: 9px;
color: #FFFFFF;
clear: left;
float: none;
}
/*ボックス*/
.box {
margin: 0px;
padding: 0px;
height: auto;
width: 587px;
clear: left;
}
/*ボックス内・画像とテキスト*/
#main .box img {
float: left;
padding-right: 10px;
}
#main .box h5 {
font: bold 14px "ＭＳ Ｐゴシック", Osaka;
color: #022962;
margin: 0px 0px 10px;
padding: 0px;
}
.txt {
font: normal 13px/16px "ＭＳ Ｐゴシック", Osaka;
color: #333333;
margin: 0px;
padding: 0px;
}
em {
visibility: hidden;
}

回答No.3

readordie · ベストアンサー

ちょっと整理して、ブロック要素に赤いborderを付けました。
ブラウザで見ると、赤い枠で囲まれたブロック要素は指定どおりになっているかと思います。
imgがboxからはみ出ていますね。なぜかというのは参考URLを見るとわかります。
この状態だと、<div class="box">の高さを決めているのは
その中の<h5>と<p>の合計の高さです。ブラウザのデフォルトスタイルは差があるので、それで高さが変っているのではないでしょうか。

<!-- htmlここから -->

<div id="main">

<h3 id="mds01"><em>見出し001</em></h3>

<div class="box">
<img src="img/photo00.jpg" width="155" height="108">
<h5>小見出し</h5>
<p class="txt">ここにテキストが入ります。<br><br>
ここにテキストが入ります。<br>
ここにテキストが入ります。</p>
</div>

<div class="box">
<img src="img/photo00.jpg" width="155" height="108">
<h5>小見出し</h5>
<p class="txt">ここにテキストが入ります。<br><br>
ここにテキストが入ります。<br>
ここにテキストが入ります。</p>
</div>

<h3 id="mds01"><em>見出し002</em></h3>

<div class="box">
<img src="img/photo00.jpg" width="155" height="108">
<h5>小見出し</h5>
<p class="txt">ここにテキストが入ります。<br><br>
ここにテキストが入ります。<br>
ここにテキストが入ります。</p>
</div>

</div>

<!-- htmlここまで -->

/*メイン大枠部分*/
#main {
margin: 0px;
padding: 0px;
width: 627px;
float: right;
border: 1px solid red;
}

/*各見出し*/
#mds01 {
background: url(img/mmds01.gif) no-repeat;
margin: 25px 0px 15px;
padding: 0px;
height: 20px;
width: 587px;
font-size: 9px;
border: 1px solid red;
}

/*ボックス*/
#main .box {
width: 587px;
clear: left;
border: 1px solid red;
}

/*ボックス内・画像とテキスト*/
#main .box img {
float: left;
padding-right: 10px;
}

#main .box h5 {
font: bold 14px "ＭＳ Ｐゴシック", Osaka;
color: #022962;
margin: 0px 0px 10px;
padding: 0px;
border: 1px solid red;
}

#main .box p.txt {
font: normal 13px/16px "ＭＳ Ｐゴシック", Osaka;
color: #333333;
margin: 0px;
padding: 0px;
}

参考URL：

http://www.techdego.com/2007/01/floatcssclearfix.php

お礼

こちらの方法で解決できました！
ありがとうございます。

ソースを全て書いてくれていた為、とてもわかりやすかったです。
助かりました。本当にありがとうございます。

回答No.4

kuzumiHK

No.1です。少し時間ができたのでmacで検証してみました。
floatの多用が原因で、IEのバグ？でmarginがうまく機能していないようです。（WindowsでもIE以外のブラウザではずれが生じていませんか？）

解決策として、marginで余白を取っている部分を、
なるべくpaddingに変更するとかなりの部分で差異が解消されると思います。
（borderを使っている場合など、どうしてもmarginで余白を取らなければならない場合、条件付コメントやハックなどでIE6だけにスタイルを適用する必要がありそうです）

必要最小限、修正したほうがよさそうな部分をまとめてみました。
(1)marginでの余白を0にし、paddingで余白を調整する。
(2)余白をすべて一度クリアにするため、
以下をスタイルシートに追加する
*{
margin:0;
padding:0;
}
(3)imgをpタグ（クラス付）やh4、h5タグなどブロック要素で囲い、
スタイルの「#main .box img」を、
「#main .box p.クラス（#main .box h4）」に変更する。

以上の3点です。

お礼

問題点のご指摘、ありがとうございます。
自分では気付かない部分だった為、とても参考になりました。

回答No.2

miya_00

まず最初に聞きたいのですが、ブラウザスタイルの初期化って行っていますか？

今書いて頂いたCSSが全てではないと思うので確認させて下さい。

ちなみに自分で試した所。

h3 {
padding:0; margin:0;
}
をはじめに指定し、
marginではなくpaddingで上下の幅を指定したら、IE７、FF2.0では同じ表示になりました。

それ以外はためしてないのですが、たぶん大丈夫だと思います。

もし駄目なら対処法として
.boxにclearfixを指定する。

<h5>小見出し</h5>
<p class="txt">ここにテキストが入ります。<br><br>
ここにテキストが入ります。<br>
ここにテキストが入ります。</p>

を<div>で囲い、そのdivにfloat: right;をかけてみて下さい。

clearfixについてわからなかった場合は、
http://www.css-lecture.com/log/css/013.html

補足

アドバイスありがとうございます。
ブラウザスタイルの初期化とは、CSS内に下記のコードを書き込む事でよろしいでしょうか？
* {
margin: 0px;
padding: 0px;
border: 0px;

font-size: 100%;
font-style: normal:
}

今回、アドバイス頂いた方法でも、MacのSafariではうまく表示されませんでした。
原因をもう少し探ってみようと思いますので、その時に、別トピにて改めて質問をさせて頂きます。

clearfixのアドバイスもありがとうございました。

回答No.1

kuzumiHK

<br style="clear: both;" />を削除して、
.mds02{clear: both;}でいかがでしょうか。

補足

ご回答ありがとうございます。

ご指摘の方法でやってみたのですが、
mds02の上部のマージン：25pxが無視されてしまうんです。
Safariですと、見た目10px程度の余白になってしまいます。
Firefoxですと5px程度です。

引き続き、アドバイスお願い致します。