cssを使って枠の設定をしたく以下の記述をしましたが、一部うまくいかな

質問

cssを使って枠の設定をしたく以下の記述をしましたが、一部うまくいかないところがあり、質問をさせて頂きますのでどなた様かご指導のほどよろしくお願いいたします。

［css］

<div id="main">
border: solid 2px #d3d3d3;
margin-left:auto;
margin-right:auto;
width:780px;

<div id="waku3">
width:200px;
border: solid 3px #d3d3d3;
background-color:red;

<div id="waku7">
width:570px;
border: solid 3px #d3d3d3;
float:left;
}

私としては780pxで作成した枠の中に、左側に200pxの枠を作成して、その右側に、570pxの枠を作成したかったのですが、何かがきっと問題なようで、うまくいきません。
どなた様か、ご指導のほどよろしくお願いいたします

感じとしては以下のような感じで御座います。

http://desktop10.web.fc2.com/

どなた様か、ご教示のほどよろしくお願いいたします。

回答No.1

hok212 · ベストアンサー

id名：waku3 の要素に float:left; のスタイル、id名：waku7 の要素に float:right; のスタイルをそれぞれ指定し、waku7の直後の要素にて clear:both; のスタイルを指定することで上手くいくはずです。

ただし、border-widthの扱いがブラウザによって微妙に違うので、id名：mainの要素幅を広げる、またはwaku3あるいはwaku7の要素幅を少し縮めるなど、レイアウトに少し余裕を持たせたほうが良いでしょう。

ちなみに、clear:both; のスタイルを指定する要素は、次のような空の要素でもOKです。
<div style="clear:both;"></div>

お礼

hok212様。この度は初心者の私にご教示をくださいまして真にありがとう御座いました。今回ご指導通り実行したところ、無事成功出来ました。
本当にありがとう御座いました。とてもうれしいです。

またご縁がありましたときはよろしくお願いいたします。

本当にありがとう御座いました。

回答No.2

zeff

<style type="text/css">
div#main{
border: solid 2px #d3d3d3;
margin-left:auto;
margin-right:auto;
width:780px;
padding:10px 5px;
}
div#waku3{
width:200px;
border: solid 3px #d3d3d3;
background-color:red;
float:left; /*　追加 */
}
div#waku7{
width:570px;
border: solid 3px #d3d3d3;
float:left;
}
/*　下の枠　*/
div#hoge{
clear:left;
width:570px;
border: solid 3px #d3d3d3;
}
</style>

<div id="main">
<div id="waku3"></div>
<div id="waku7"></div>
<div id="hoge"></div>
</div>

これでうまくいくとは思うのですが、
しかし仮にこうしてもborderが3pxなので、
200px + 3px*2 + 570px + 3px*2 =782px
と780pxをオーバーしてしまいます。