ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ
スポンサーサイト（詳細）

質問
QNo.4023698 HTML&CSS DIVをぴったりと縦に並べたい
質問者：akoblue 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;
}
困り度：
  • 困っています
質問投稿日時：
08/05/15 10:35
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答良回答10pt
ANo.4 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点です。
回答者：kuzumiHK
種類：アドバイス
どんな人：専門家
自信：参考意見
回答日時：
08/05/17 18:51
この回答へのお礼問題点のご指摘、ありがとうございます。
自分では気付かない部分だった為、とても参考になりました。

回答良回答20pt
ANo.3 ちょっと整理して、ブロック要素に赤い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;
}
回答者：readordie
種類：アドバイス
どんな人：経験者
自信：参考意見
回答日時：
08/05/17 02:35
参考URL： ​http://www.techdego.com/2007/01/floatcssclearfix.php​
この回答へのお礼こちらの方法で解決できました！
ありがとうございます。

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

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

今書いて頂いた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​
回答者：miya_00
種類：回答
どんな人：専門家
自信：自信あり
回答日時：
08/05/16 00:11
この回答への補足アドバイスありがとうございます。
ブラウザスタイルの初期化とは、CSS内に下記のコードを書き込む事でよろしいでしょうか？
* {
margin: 0px;
padding: 0px;
border: 0px;

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

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

clearfixのアドバイスもありがとうございました。
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答
ANo.1 <br style="clear: both;" />を削除して、
.mds02{clear: both;}でいかがでしょうか。
回答者：kuzumiHK
種類：回答
どんな人：専門家
自信：参考意見
回答日時：
08/05/15 21:50
この回答への補足ご回答ありがとうございます。

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

引き続き、アドバイスお願い致します。
この回答へのお礼この回答にお礼をつける(質問者のみ)
最新から表示｜回答順に表示｜良回答のみ表示
スポンサーサイト（詳細）
このページのトップへ