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

回答の条件
  • 1人2回まで
  • 登録:2006/09/15 11:22:45
  • 終了:2006/09/15 12:36:31

ベストアンサー

id:talepanda No.1

talepanda回答回数57ベストアンサー獲得回数122006/09/15 11:56:13

ポイント60pt

動作としては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;}

とか?

id:cyuna

ありがとうございます!

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

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

でも、html側で

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

2006/09/15 12:33:48
  • id:cyuna
    【訂正】
    誤 小さいdivを2つ左右振り分けで
    正 小さいdivを左に1つ、小さいimgを右に1つ
  • id:talepanda
    >でも、html側でdivとimage
    >との順番を入れ替えなければいけないのはナゼだろう・・・?

    どういうことでしょう?
  • id:cyuna
    ああ、ヘンなふうになってしまった。

    お返事の最後2行訂正

    でも、html側で
    「div id="left"」と「img~ id="right」
    との順番を入れ替えなければいけないのはナゼだろう・・・?
  • id:cyuna
    すみません・・・締め切った後に

    上のままでは、画像と文字の場所が入れ替わってしまったのですが、
    <div id="content">
    <img src="img.jpg" id="right" alt="ここに画像"/>
    <div id="left">
    <p>ここに文字。</p>
    </div>
    </div>
    としたら上手くいきました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません