Split Div Into 2 Columns Using CSS

css html css-float
PF1 picture PF1 · Dec 26, 2009 · Viewed 387.7k times · Source

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

Navish picture Navish · Jun 30, 2011

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>

Related questions

How to align 3 divs (left/center/right) inside another div?

I want to have 3 divs aligned inside a container div, something like this: [[LEFT] [CENTER] [RIGHT]] Container div is 100% wide (no set width), and center div should remain in center after resizing the container. So I set: #container{width:100%;} #left{…

Read More
How to align two elements on the same line without changing HTML

I have two elements on the same line floated left and floated right. <style type="text/css"> #element1 {float:left;} #element2 {float:right;} </style> <div id="element1"> element 1 markup </div> <div …

Read More
Stacking DIVs on top of each other?

Is it possible to stack up multiple DIVs like: <div> <div></div> <div></div> <div></div> <div></div> </div> So …

Read More