CSSでfloatがうまくいきません。

質問

CSSでfloatがうまくいきません。

.main{
width: 1000px;
}
.wrap{
width: 900px;
height: 120px;
margin-left: 50px;
background-color: #ffffff;
overflow:auto;
}
.head_l {
width: 300px;
height: 120px;
float: left;
}
.head_r {
width: 600px;
height: 120px;
float: left;
}
<div class="main">
<div class="wrap">
<div class="head_l">ロゴ画像</div>
<div class="head_r">項目</div>
</div>
</div>
mainの中にwrapという箱を作りhead_l(ロゴ画像)とhead_r(項目ボタン)という箱を横並びに表示させたいのですが、スクロールバーが出たりします。うまくいきません。どのようにしたらいいでしょうか？

回答No.2

hukazuo · ベストアンサー

画像サイズがロゴ画像がw300pxより大きいとか・・・。
あと項目画像がw600より大きいか。

上記のソースをそのままHTMLにしたら、
ちゃんとロゴ画像・項目が横並びになったので。。。

あとは項目</div>の後に、
<div style="clear:both;"></div>
を入れるとか。。

回答No.3

k0021

忘れてしまったが。
900px=300px+600px　ですが。
合計が1px少なくして見て下さい。
確かIE5.5かIE6初期バージョンの為に対応したつもりだが。
私の作成HPでは、％でも全て合計は、99%に修正していますが。

回答No.1

noname#83877

overflow:auto;を消してください

補足

ありがとうございます。スクロールバーが消えたのですが、横並びになりません。ロゴの下に項目が縦並びに表示されます。
うーむ・・・。なぜでしょ？？あー・・・わからない・・・。よろしくお願いします。