Wolf’s Little Store

Here’s the full CSS for the simple column system I was talking about earlier. As I said in the earlier post, “column-14 stands for 1/4 width, all widths in the CSS are handled in %“. The reason the widths end at 0.1 less than they’re supposed to is because of pixel rounding. I don’t think I know anyone who knows what I’m talking about when I start hitting that subject, so now you do. Scarred for life. Anyway, here goes:

/* Fork defaults: simple column system */
.columns .column { float: left; }

/* Two columns */
.columns .column-12,
.columns .column-24 { width: 49.9%; }

/* Three columns*/
.columns .column-23 { width: 66.5%; }
.columns .column-13 { width: 33.2%; }

/* Four columns */
.columns .column-14 { width: 24.9%; }
.columns .column-34 { width: 74.9%; }

/* Five columns */
.columns .column-15 { width: 19.9%; }
.columns .column-25 { width: 39.9%; }
.columns .column-35 { width: 59.9%; }
.columns .column-45 { width: 79.9%; }

/* Spacing divs to fit inside colunns: gutter width and 1/2 gutter width */
.columns .spacing-left { margin-left: 20px; }
.columns .spacing-left-half { margin-left: 10px; }
.columns .spacing-right { margin-right: 20px; }
.columns .spacing-right-half { margin-right: 10px; }
.columns .spacing-both-half { margin-right: 10px; margin-left: 10px; }

To make the images scale with the column width I make sure they’re big enough in the first place. Then this simple rule helps out:

img.maxwidth { width: 100%; }

Unfortunately, our good friend IE6 makes code-resized images (by setting dimensions that are not actually the dimensions look really, really crappy because it doesn’t apply decent resizing techniques. Anti-aliasing wasn’t as hot in 2001.

I applied this column technique in a few production sites and so far it’s working out pretty well. What’s also cool is that it isn’t too hard to explain to novices or the odd client that knows a bit of HTML, so now non-webdesigners can do columns too.

Standaristas would point out that the major flaw is a lot of non-semantic and ‘useless’ divs. Well boys, I couldn’t care less, I want to make quality websites. A div too many isn’t going to hurt anyone.

This is the basic markup for two columns:

<div class="columns">
	<div class="column column-12">
		Left column
	</div>
	<div class="column column-12">
		Right column
	</div>
</div>

Now you’re probably going to want even spacing between the columns:

<div class="columns">
	<div class="column column-12">
		<div class="spacing-right-half">
			Left column
		</div>
	</div>
	<div class="column column-12">
		<div class="spacing-left-half">
			Right column
		</div>
	</div>
</div>

Since we use widths and percentages and our spacing is managed in pixels, we have to nest divs.

If you wanted to do 3 columns it would look like this:

<div class="columns">
	<div class="column column-13">
		<div class="spacing-right">
			Left column
		</div>
	</div>
	<div class="column column-13">
		<div class="spacing-both-half">
			Middle column
		</div>
	</div>
	<div class="column column-13">
		<div class="spacing-left">
			Right column
		</div>
	</div>
</div>

And if you wanted to do one 2/3 column on the left side, and one 1/3 on the right side, it would look like this:

<div class="columns">
	<div class="column column-23">
		<div class="spacing-right-half">
			Left column
		</div>
	</div>
	<div class="column column-13">
		<div class="spacing-left-half">
			Right column
		</div>
	</div>
</div>

It’s a very flexible system for quick prototyping and for newspaper-style, information-heavy websites, but if your websites only has like, 8 pages, I would recommend setting a custom grid yourself.

An important note

If you’re going to use this code, make sure you apply clearfix to the columns div (that is, the parent div), since it’s children are floating. I am not going to explain the whole concept of float, clear and clearing without markup here, so let’s keep this short and sweet:

Add this to your main stylesheet:

/* Clearfix */
.clearfix:after, .columns:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

This to your IE6 condtional comments:

/* Clearfix */
.clearfix, .columns {
	display: inline-block;
}

This to your IE7 condtional comments:

/* Clearfix */
.clearfix, .columns {
	zoom: 1;
}

Technical reading

If you don’t know what I’m talking about in the previous part, I recommend reading On having layout, followed by Clearing without structural markup and a bit of advice on handling IE7.

Good night, and if you have any improvements, suggestions, questions, they’re more than welcome.

• Category: code 'n scripts
• Back to the overview