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.1 回答者： noname#83877 回答日時： 2009/03/21 18:45

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

この回答への補足

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

補足日時：2009/03/21 19:04

No.2 ベストアンサー 回答者： hukazuo 回答日時： 2009/03/21 23:16

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

あと項目画像がw600より大きいか。

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

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

No.3 回答者： k0021 回答日時： 2009/03/22 07:04

忘れてしまったが。

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