は、 <p></p>は、私はすべてのwrappe内に含まれていますdiv要素内のdivのカップルを持っている...

Question

は、ほんの少しのCSSの問題を抱えている私のCSSと間違っているかを把握カント

すなわち

<div wrapper> 
<div bodyWrapper> 
    <div bodyLeft></div> 
      <div bodyRight></div> 

</div> 
</div> 

これはすべてのコードではありませんが、それらの間に余分なものがありますが、問題はCSSにあります。私はラッパーの主な背景を黒に設定し、残りはすべて白に設定しました。ボディー（左&右）タグはどちらも白く表示されますが、bodywrapperタグは効果がないと見なされるため、ボディータグの下に黒いスペースがあります。私はそれを並べ替えることができる何かはありますか？ここ

CSSコード

#wrapper #bodywrapper { 
border: 20px solid #000; 
background-color: #FFF; 
margin: 0px; 
padding: 0px; 
height: auto; 
width:auto; 
} 

    #wrapper #bodywrapper #bodyleft { 
margin: 0px; 
height: auto !important; 
width: 630px; 
float: left; 
background-color: #FFF; 
padding-top: 40px; 
padding-right: 10px; 
padding-bottom: 10px; 
padding-left: 20px; 
overflow: hidden; 
} 


#wrapper #bodywrapper #bodyright { 
margin: 0px; 
float: right; 
height: auto; 
width: 280px; 
background-color: #FFF; 
padding-top: 40px; 
padding-right: 10px; 
padding-bottom: 10px; 
padding-left: 10px; 
color: #FFF; 
background-image: none; 
} 

Answer 1

フェイク列が働くだろうが、あなたは純粋なCSS方式後にしている場合は、WWWから同じ高さの列を試すことができます.ejeliot.com

http://jsfiddle.net/spacebeers/s8uLG/3/

あなたが隠しに設定オーバーフローを使用してコンテナを設定し、それぞれに負追加DIVマージンボトムと等しい正のパッディングボトム。

#container { overflow: hidden; } 
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; } 
#container .col2 { background: #eee; } 

<div id="container"> 
    <div> 
     <p>Content 1</p> 
    </div> 
    <div class="col2"> 
     <p>Content 2</p> 
     <p>Content 2</p> 
     <p>Content 2</p> 
     <p>Content 2</p> 
    </div> 
</div> 

Answer 2

これは、役立つかもしれフェイク列です：http://www.alistapart.com/articles/fauxcolumns/