単純な2列のdivレイアウト

Question

浮動小数点型の2列レイアウトを作成しようとしています。divはhtmlで書かれています。問題は、次のdiv,footが常にright divの右側に表示されていることです。私はどこかでclearステートメントを使用しなければならないことを知っていますが、どちらが正しいかわかりません。

また、左に示すように、私は明示的に高さをleftと指定しました。 rightを強制的に同じ高さに設定する方法はありますか？

<div id="main"> 
    <div id="left" style="float: left; width: 150px; background: #DDDDDD; height: 500px;"> 
     left column 
    </div> 

    <div id="right" style="float: left; background: #EEEEEE;"> 
     right column 
    </div> 
</div> 

<div id="foot"> 
    footer 
</div> 

Answer 1

footのdivにclear:bothを使用してください。

main divを特定の高さに設定してから、leftとrightの高さを100％に設定することができます。

Answer 2

これは必要なものですか？

#foot{display: block; clear: both;} 

Answer 3

foot divをクリアする必要があります。

#foot { clear: left /* or both */; } 

同等の高さのチャレンジについては、faux-column technique by Roger Johanssonを使用することをおすすめします。

メイン列にはセカンダリの内容よりも多くの内容が必要です。そうであれば、500pxの高さの制約がなくなり、必要なものに柔軟に対応できます。空のdivを作成

#foot{ 
    clear: both; 
} 
#left, #right{ 
    float: left; // remove this definiton from tag 
    height: 500px; // remove this definition from tag 
} 

・ホープ、このヘルプ

Answer 4

あなたのCSSは次のようになります。 clrbthの..あなたはクラス

.clrbth { 
clear:both; 
margin:0; 
padding:0; 
} 

Answer 5

を、ちょうどメインのdivの終わり上記右のdivの終わりにそれを入れて、それをクラス名を与える：