浮動小数点数をHTMLで正しく配置するにはどうすればよいですか？

Question

私は、このCSSコードを使用してブロックの3種の作るしようとしている：

div#menu { 
width:200px; 
height:400px; 
border:2px ridge white; 
text-align:center; 
float:left; 
margin:4px; 
} 
div#container { 
width:850px; 
height:850px; 
overflow:auto; 
margin:auto; 
text-align:center; 
border:2px ridge green; 
} 
div#maincontent { 
width:608px; 
height:700px; 
border:2px ridge white; 
text-align:center; 
float:right; 
top:10px; 
margin:4px; 
} 
div#subcontent { 
width:200px; 
height:100px; 
border:2px ridge white; 
text-align:center; 
float:left; 
margin:4px; 
clear:both; 
} 

コンテナは、プロジェクト全体/ページを保持しますが。

コンテナ内のメニューは左上隅にあり、サブコンテンツボックスはメニューのすぐ下にあります（左下隅）。メインコンテンツボックスは、メニュー/サブコンテンツボックスのすぐ右上にあります。

私はHTMLで、それをこのような何かを配置しました：

<div id="container"> 
<div id="menu"></div> 
<div id="subcontent"></div> 
<div id="maincontent"></div> 
</div> 

をしかし、私は、それがサブコンテンツボックスのトップのトップに合わせMainContentのボックスの上部を作ることを実行すると、代わりにメニューの。

私はそれを右の代わりに右上にどのように浮かせるでしょうか？

Answer 1

http://jsfiddle.net/7zvSu/

あなたMainContentのfloat:leftを（topプロパティを削除）してください。メニューの直後にメインコンテンツのdivを配置します。

CSS：

div#menu { 
    width:200px; 
    height:400px; 
    border:2px ridge white; 
    text-align:center; 
    float:left; 
    margin:4px; 
} 
div#container { 
    width:850px; 
    height:850px; 
    overflow:auto; 
    margin:auto; 
    text-align:center; 
    border:2px ridge green; 
} 
div#maincontent { 
    width:608px; 
    height:700px; 
    border:2px ridge white; 
    text-align:center; 
    float:left; 
    margin:4px; 
} 
div#subcontent { 
    width:200px; 
    height:100px; 
    border:2px ridge white; 
    text-align:center; 
    float:left; 
    margin:4px; 
    clear:both; 
} 

HTML

<div id="container"> 
    <div id="menu"></div> 
    <div id="maincontent"></div> 
    <div id="subcontent"></div> 
</div> 

Answer 2

あなたはブロックのために右フロートしたい場合は、必ず、これを試して左フロートブロックの前にそれを置く

浮きたい場合は

div要素の右側にある

<div id="maincontent"></div> 

、フロートが出る前に、これが最初に浮かぶのdiv

次の順序は

<div id="container"> 
<div id="maincontent"></div> 
<div id="menu"></div> 
<div id="subcontent"></div> 
</div>