CSS　floatによるレイアウト

解決済

質問者：noname#63203
質問日時：2007/07/13 08:37
回答数：1件

box_mを縦に並べて、box_mの中にbox_1（左）とbox_2（右）を作りました。

CSS
.box_m { width: 410px; margin: 0px 0px 20px 0px; }
.box_1 { float: left; width: 200px; height: 100px; }
.box_2 { float: right; width: 200px; height: 100px; margin: 0px 0px 0px 10px; }

HTML
<div class="box_m">
　<div class="box_1">
　ボックス１
　</div>
　<div class="box_2">
　ボックス２
　</div>
</div>
<div class="box_m">
　<div class="box_1">
　ボックス１
　</div>
　<div class="box_2">
　ボックス２
　</div>
</div>

IEでは意図したとおりに表示されましたが、Firefoxではbox_mの下のmargin20pxが反映されず、box_m同士がくっついています。
box_m同士の間に20pxの空間を作るにはどうしたらいいですか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： himajin100000
回答日時：2007/07/13 08:46

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>テスト</title>
</head>
<body>
<style type="text/css">
.box_m {
width: 410px;
margin: 0px 0px 20px 0px;
background-color:red;
overflow:hidden;
}
.box_1 {
float: left;
width: 200px;
height: 100px;
background-color:green;
}
.box_2 {
float: right;
width: 200px;
height: 100px;
margin: 0px 0px 0px 10px;
background-color:blue;
}
</style>
<div class="box_m">
　<div class="box_1">
　ボックス１
　</div>
　<div class="box_2">
　ボックス２
　</div>
</div>
<div class="box_m">
　<div class="box_1">
　ボックス１
　</div>
　<div class="box_2">
　ボックス２
　</div>
</div>
</body>
</html>