Split Div Into 2 Columns Using CSS

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!

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

Solution 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.