CSSで、何故か、「float」が上手く効かない

質問

詳しく書きますと、前回した質問、
http://okwave.jp/qa/q7786505.html
の続きになります。
ちなみにこれは、今の所、解決した次第です。
しかし、新たな場面に直面している最中であります。
http://sky.geocities.jp/thanksv0358/index.html#
質問は、上記で作成しているページについてです。

その内容ですが、ページ中程にある「 今月のおすすめ 」とある、すぐ下の「 見出し3 」という2つの項目を先頭行にして、横一列にそろえて表示したいと思いました。

そのため、項目内容をHTMLで、
<div class="left">
～
</div>
と、
<div class="right">
～
</div>
で囲い、その後、それぞれをCSSで、
.left{
float:left;
}
.right{
float:right;
}
としたにもかかわらず、何故か中途半端な形で、ずれている状態が確認できます。
これが現在、意味不明な箇所になっています。

ここで質問ですが、この場合、どうすれば「 見出し3 」の文字2つを並列に表示できますでしょうか？
詳しい方がいましたら、よろしくお願いします。

回答No.2

naokita · ベストアンサー

幅を設定しましょう。
今現在の状況は、小さな箱にそれよりも大きな物を入れようとしています。
そうすると、箱に入らないか、箱は壊れますよね・・・

問題点：
１、トップ画像よりも大きな枠にする。または、画像を小さくする。
２、メイン＝レフト＋ライトの幅に収まるようにする。

１、
画像が、787pxなのだから、mainの枠は600pxでは無理があります。
なので、
width: 600px;　ではなく、　width: 800px;　程度にしましょう。

２、
枠幅が狭いからライトが入れない・・・
なので、
.left {
float: left;
width: 400px;
}
.right{
float:right;
width: 400px;
}

左width: 400px;＋右width: 400px;＝合計800px　←この値より小さくする事。

お礼

ご回答、ありがとうございます。とても参考になりました。

回答No.3

ORUKA1951

他の方への回答と混同していました。
先に示した回答のように
<div class="section">
　<div class="section">
　　<h3>見だし</h3>
　　　・・・・・
　</div>
　<div class="section">
　　<h3>見だし</h3>
　　　・・・・・
　</div>
</div>
として、
div.section{position:relative;}
div.section div.section{
width:50%/* 49%くらいのほうが良い */
float:left;
}
33%以下にすると、三つ並びますし、最小幅を決めておくとウィンドウ幅によって横に並んだり縦に並びます。
float:leftに続いてfloat:right;は、とってもまずいです。
説明済みです。

.left と言う書き方はCSS1の時代の名残です。CSS2以降は、基点となるセレクタにつなげるセレクタを書くことになっています。
div.section ----- これは、要素セレクタdiv[class~=section"]と同じ意味
と書くのがルールです。
.sectionは、*.sectionを省略したものとみなされるだけです。もし書くなら
*.sectionとかく癖をつけましょう。
　断然その方がわかりやすいはずです。

お礼

ご回答、ありがとうございます。とても参考になりました。

回答No.1

ORUKA1951

先に回答しました。
CSSのセンタリングが、「div」で何故か出来ない - ホームページ作成ソフト - 教えて！goo ( http://okwave.jp/qa/q7786505.html#a2 )
のサンプルHTMLを試してください。

float:leftをいずれにも指定するほうが良いです。

　これでうまく表示されるなら、他のところに原因があります。

お礼

ご回答、ありがとうございます。とても参考になりました。