Split Div into 2 columns using CSS

In this tutorial i will show how to properly split a div into 2 columns such that the background of the parent div is not ignored. Consider the following example. In the example below, the background-color of content div is set to blue. The content div contains right and left div inside it. I have tried to split the div into two columns. As you could see, the split isn’t happening properly. The background-color of the content div is being ignored by the inner div.

See the Pen XKZkvp by Vivek Maskara (@maskaravivek) on CodePen.

The reason behind this is the use of float. When you float those two divs, the content div collapses to zero height. Add the following after the #right div but inside the content div. That will force the content div to surround the two internal, floating divs.

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

Here’s the updated code.

See the Pen GqrxgP by Vivek Maskara (@maskaravivek) on CodePen.

This content has been helpful to you?

Thanks for contributing!

Yes No