floatについて

質問

IEだといいんですが、MacのIE5.17,OS9.2で表示がおかしくなってしまいます。

<div id="container">
<div id="nav">・・・</div>
<div id="main">・・・</div>
</div>

で、

#container {width:760px;}
#nav {width:160px;float:left;}
#main{width:580px;float:right;}

とすると、div#mainが「改行されて」右寄せになります。「改行なし」で右寄せにするにはどうしたらいいのでしょうか？
#navと#mainは、合計740pxで#containerに余裕を持たせてるんですが…

回答No.3

pingu98

わ～、なんでだろう。Mac無いのでわかりません。
文法的には全く問題ないです。

気になるのは、HTMLファイル内の一行目に<!DOCTYPE～>等の文書型宣言は書いてありますでしょうか。これがないと、各ブラウザはそれぞれ自由奔放(笑)にCSS解釈しますので、書いておいたほうがよいです。

補足

Dreamweaverを使用していますので、
文書型宣言はされています。
transitionalです。strictではありません。

回答No.2

ao_

自信ありませんが、containerにpadding:0を入れていますか？
また、nav,mainにmaginが入っていて合計してcontainerのwidthを超えていないですか？
もし、mainのwidthを200pxなどの小さい値にしたときnavの並べばサイズに問題があると思います。

補足

containerは固定で、navとmainの幅を思い切り狭くしても改行されてしまうんです。
(>_<)

ちょっと思いついたのがposition属性の利用です。
手元にMacがないので試してみます。

回答No.1

kazu0719

こんにちは。
当方Macを所持はしていないので確認はできませんが、
例の記述だけを見たところ、#mainの「float: right」は必要無いと思います。

#navに「float: left」が指定されているので、
左に寄せられた#nav以下の内容は、#navの右側に回り込もうとします。

そして、回り込みを避けたい要素には、必ずclearプロパティを指定してください。

また、例の場合では、右側のボックス（#main）には、
float: leftが指定されている左側のボックス（#nav）の幅の分かそれ以上の値を左マージンに指定しておくと、
色んなレイアウトのパターンでも崩れにくくなりますので、合わせて記述しておくと良いですね。

例えば以下↓のような感じです。

<div id="container">
<div id="nav">・・・</div>
<div id="main">・・・</div>
<div id="footer">・・・</div>
</div>

#container {width: 760px;}
#nav {width: 160px; float: left;}
#main {width: 580px; margin-left: 160px;}
#footer {clear: both;} （←例の場合だとclear: leftでも可）

参考URL：

http://hp.vector.co.jp/authors/VA022006/css/visualren.html#float