人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

【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>

1158286964
●拡大する

●質問者: cyuna
●カテゴリ:ウェブ制作
✍キーワード:border CSS ff HTML IE
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● talepanda
●60ポイント ベストアンサー

動作としてはfirefoxの方が正しいような気がしますが・・・

css

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;}

とか?

◎質問者からの返答

ありがとうございます!

上の方法でやってみました。

そうか!divが左にあるからといって、かならずしも「float:left;」ではないんですね。

でも、html側で

の順番を入れ替えなければいけないのはナゼだろう・・・?

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ