Question

Just have a small css problem…

I have a couple of divs within a div that’s all contained within a wrappe,

ie

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

</div>
</div>

That’s not all the code, there is extra between all of them but the problem is with the css. I have the main background of the wrapper set to black and all the rest set to white. The body(left & Right) tags both come up white but the bodywrapper tag sees to have no effect so there is black space under the body tags if they dont have the same length. is there anything i can do to sort it?

here is the css code

   #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

Faux columns would work but if you’re after a pure CSS method you can try equal height columns from http://www.ejeliot.com

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

You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.

#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>