Hand coded

To illustrate RapidWeaver's HTML Code page, I thought what better then to demonstrate one of my favorite snippets and show you what it does and how it works.

4 column layout

This one has never been released in the wild because it's in a constant state of flux. I keep looking at ways to make it better and balance more on all platforms. But here is the basic idea; you make 4 boxes (block level elements, like <div>, will do), you make each of them 1/4 of the width of the available space (using width: 25%; works quickly here), then apply a float to each one, making the next one after it fall into place beside it.

The trouble is, this can be tough to use in a RapidWeaver theme with a floated sidebar since in order to add content AFTER this 4 column layout, you need to have a clear: both; which can shoot you content down below the sidebar (or vice-versa in some cases).

Another thing you have to watch for is commenting and IE 6. IE 6 has an odd phantom character bug concerning floats and the comments that follow them. It's best not to comment the end of each floated <div> which is not something I would normally recommend.

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, 3 and 4.
	Pretty cool eh?</p>
</div>
		
<div class="column two">
	<h3>Column 2</h3>
	<p>This is column two, the second one, followed by 3 and 4.
	Preceded by 1.</p>
	</div>
		
<div class="column three">
	<h3>Column 3</h3>
	<p>This is column three, the third one, followed by 4.
	Preceded by 1 and 2.</p>
</div>
		
<div class="column four">
	<h3>Column 4</h3>
	<p>This is column four, the fourth one, Preceded by 1, 2 and 3.
	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, 25%, 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: 25%;
	float: left;
}

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

How it looks