CSS 2 Columns

Divide your page with the CSS 2 columns code below.

First add the following code to your CSS file…

.twoCol {margin-bottom:1em;overflow:hidden;}
.leftCol, .rightCol {width:49%;overflow:hidden;}
.leftCol {float:left;}
.rightCol {float:right;}

and insert the following HTML code anywhere you would like to divide the content area in half. Common uses would be to have pictures on the right and text on left or dividing a really long bullet list in half. In case you're wondering what the overflow:hidden property does, it clears any floats it contains. Float clearing can be a gotcha in IE and Firefox and this simple property tells the the browser to do its job and wrap the contents inside of it. Otherwise it just chops it off. For more detail on this bug read this.

<div class="twoCol">
	<div class="leftCol">
		<!-- HTML code goes here -->
	</div><!-- .leftCol -->
	<div class="rightCol">
		<!-- HTML code goes here -->
	</div><!-- .rightCol -->
</div><!-- .twoCol -->

Tags: commonly used css, css building blocks, css columns

About the author

I started my career as a print designer and wanted nothing to do with "code". Then slowly I began to learn by reading tutorials online. My learning process has been challenging, yet very rewarding. My goal is to document the lessons I have learned and to encourage other beginners in the field of web design / front-end programming. - Jacob Lett