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 "MS Pゴシック", Osaka;
color: #022962;
margin: 0px 0px 10px;
padding: 0px;
}
.txt {
font: normal 13px/16px "MS Pゴシック", Osaka;
color: #333333;
margin: 0px;
padding: 0px;
}
em {
visibility: hidden;
}