Split Div Into 2 Columns Using CSS

Question

I have been attempting to split a div into two columns using CSS, but I have not managed to get it working yet. My basic structure is as follows:

<div id="content">   <div id="left">      <div id="object1"></div>      <div id="object2"></div>   </div>    <div id="right">      <div id="object3"></div>      <div id="object4"></div>   </div> </div> 

If I attempt to float the right and left divs to their respective positions (right and left), it seems to ignore the content div's background-color. And other code that I have tried from various websites doesn't seem to be able to translate to my structure.

Thanks for any help!

Answer 1

This works good for me. I have divided the screen into two halfs: 20% and 80%:

<div style="width: 20%; float:left">    #left content in here </div>  <div style="width: 80%; float:right">    #right content in there </div> 

Answer 2

When you float those two divs, the content div collapses to zero height. Just add

<br style="clear:both;"/> 

after the #right div but inside the content div. That will force the content div to surround the two internal, floating divs.