Split Div Into 2 Columns Using CSS

Another way to do this is to add overflow:hidden; to the parent element of the floated elements.

overflow:hidden will make the element grow to fit in floated elements.

This way, it can all be done in css rather than adding another html element.

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.

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>

None of the answers given answer the original question.

The question is how to separate a div into 2 columns using css.

All of the above answers actually embed 2 divs into a single div in order to simulate 2 columns. This is a bad idea because you won't be able to flow content into the 2 columns in any dynamic fashion.

So, instead of the above, use a single div that is defined to contain 2 columns using CSS as follows...

.two-column-div {
 column-count: 2;
}

assign the above as a class to a div, and it will actually flow its contents into the 2 columns. You can go further and define gaps between margins as well. Depending on the content of the div, you may need to mess with the word break values so your content doesn't get cut up between the columns.