【cssのはてな】大きいdivの中に小さいdivを2つ左右振り分けで、小divの左側を60px空けたいです。
IEだと上手くいくのですが、FFだと左のdivと右divの間に隙間ができてしまう…（左図参照）
「text-align」をいろいろ入れてみたのですが、よくわかりません。
====css==========
div#content{ width: 680px; height: 100px; margin: 0px; padding: 0px; border: 1px #ff0000 solid;}
div#left{ float: left; width: 308px; height: 100px; margin: 0px 0px 0px 60px; padding: 0px; border: 1px #ff0000 solid;}
img#right{ float: right; width: 242px; height: 100px; margin: 0px; padding: 0px; border: 1px #ff0000 solid;}
====html==========
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="base.css" />
<title>たとえば</title>
</head>
<body>
<div id="content">
<div id="left">
<p>ここに文字。</p>
</div>
<img src="img.jpg" id="right" alt="ここに画像"/>
</div>
</body>
</html>
No.1
57
12
60pt
動作としてはfirefoxの方が正しいような気がしますが・・・
css
6
6
div#content{ width:620px; height: 100px; margin: 0px; padding: 0px; border: 1px #ff0000 solid;}
div#left{ float:right;width: 308px; height: 100px; margin: 0px; padding: 0px; border: 1px #ff0000 solid;}
img#right{ float: right; width: 242px; height: 100px; margin: 0px; padding: 0px; border: 1px #ff0000 solid;}
ジャスト60pxにはなりませんけど。
ホントは、contentのwidthから内部のdiv、imgのwidthを引いた分だけ左側に余白ができるはずなんですが、微妙に隙間があったりしますね。
あるいは
div#content{ width:610px; height: 100px; margin: 0px; padding: 0px; border: 1px #ff0000 solid;}
div#left{ position:relative; float: left; left: 60px; width: 308px; height: 100px; margin: 0px; padding: 0px; border: 1px #ff0000 solid;}
img#right{ position:relative; float:left; left: 60px; width: 242px; height: 100px; margin: 0px; padding: 0px; border: 1px #ff0000 solid;}
とか？
cyuna
2006/09/15 11:25:19
talepanda
1
1
ありがとうございます！
上の方法でやってみました。
そうか！divが左にあるからといって、かならずしも「float:left;」ではないんですね。
でも、html側で