The worlds easiest centered two column layout

Here’s a post for beginner HTML/CSS soon to be ninjas. About 90% of the sites I have built use this same technique for layout. I generally use a 950px wide layout but this can be any size you would like as long as you adjust the width of the columns accordingly.

1: Set up the HTML


2: Add the CSS

The first thing I do before I start coding my CSS is use a CSS reset. I tend to use Erik Meyers reset CSS but there are many CSS resets such as yahoo’s.

Believe it or not thats all you have to do for the layout. Just remember if you are adding a border to the left_column or right_column that you are increasing the overall width of each column.

Check out a little demo page I created.

© 2010 M2Volt all rights reseved

back to top