The 2 column layout

On this page I showed you how to make a 4 column layout with a little HTML and a little CSS. This time around, I am going to take almost the identicle concept and show you a 2 column layout.

The HTML

The following is straight forward markup. We've put a couple of classes on each, the first being .column and the second reflecting the order they appear in. Note I spelled the number. Classes and id's can't start with a numeric value (which is a stupid rule if you ask me, ascii is ascii is ascii). The first class is the common class so broad styles can be applied quickly. The second class serves as a way of differentiating between each column if need be.

<div class="column one">
	<h3>Column 1</h3>
	<p>This is column one, the first one, followed by 2.
	Pretty cool eh?</p>
</div>
		
<div class="column two">
	<h3>Column 2</h3>
	<p>This is column two, the second one, preceded by 4.
	Pretty cool eh?</p>
</div>

The CSS

The CSS is where the magic happens. To strike a balance across all columns we use .column to apply the common width, 50%, and to float each one to the left. The we use .column * to apply a lesser width to all elements contained within each .column. This is the easiest way to get space between each column as adding padding gets a little funky on different browsers. Lastly we use the auto margin trick to balance the spacing of each .column evenly across the width of the layout.

.column {
	width: 50%;
	float: left;
}

.column * {
	width: 95%;
	margin: 0 auto;
}

How it looks

Tags: 2, column, Layout