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 number of columns. 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 is to allow styles based on width percentages.

<div class="column four">
	<div class="content">
		<h3>Column 1</h3>
		<p>This is column one, the first one, followed by 2, 3 and 4.
		Pretty cool eh?</p>
	</div>
</div>
		
<div class="column four">
	<div class="content">
		<h3>Column 2</h3>
		<p>This is column two, the second one, followed by 3 and 4.
		Preceded by 1.</p>
	</div>
</div>
		
<div class="column four">
	<div class="content">
		<h3>Column 3</h3>
		<p>This is column three, the third one, followed by 4.
		Preceded by 1 and 2.</p>
	</div>
</div>
		
<div class="column four">
	<div class="content">
		<h3>Column 4</h3>
		<p>This is column four, the fourth one, Preceded by 1, 2 and 3.
		Pretty cool, eh?</p>
	</div>
</div>

The CSS

The CSS is where the magic happens. To strike a balance across all columns we use .column to apply the common float rule. The we use .column .content to apply a lesser width to the content 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. And then we use the other number classes, .one through .five to apply the widths we need, depending on the number of columns we need. Lastly we use the auto margin trick to balance the spacing of each .column .content evenly across the width of the layout.

.column { float: left; }
.one { width: 100%; }
.two { width: 50%; }
.three { width: 33%; }
.four { width: 25%; }
.five { width: 20%; }
.column .content { width: 90%; margin: 0 auto; padding: 0;}

How it looks