Cibolo Media Services - Website Design & Development for Small Businesses & Entrepreneurs

Sure, you can develop clean and accessible code, but it’s all for moot if the person who manages the content can’t. It’s not their fault, many content managers just don’t have the time available to learn about CSS layout techniques.

Most content pages are simple one-column blocks of text with a few headings and images thrown in. But some content calls for a more complex layout, say a two products compared to each other, sitting side by side.

See Final Example

Using some common CSS classes, we can make this layout a very simple task.

CSS Column Classes

Let’s start with the HTML. Assuming your content manager knows the basics of semantic code, here’s the code for the product comparison:

<div>
<h1>Child-safe Friendly Corners</h1>
<p>Safe and fun for the family, these rounded corners will win you over with the Web 2.0 generation.</p>
</div>
<div>
<h1>Lickable Glossy Buttons</h1>
<p>So shiny you can just eat 'em up, these buttons are sure to impress your social media friends.</p>
</div>

Now imagine if all we had to do was add a few classes and we get a split-column layout.

<div class="column half">
<h1>Child-safe Friendly Corners</h1>
<p>Safe and fun for the family, these rounded corners will win you over with the Web 2.0 generation.</p>
</div>
<div class="column half">
<h1>Lickable Glossy Buttons</h1>
<p>So shiny you can just eat 'em up, these buttons are sure to impress your social media friends.</p>
</div>

Or if we have a third column:

<div class="column third">
<h1>Child-safe Friendly Corners</h1>
<p>Safe and fun for the family, these rounded corners will win you over with the Web 2.0 generation and keep the children safe.</p>
</div>
<div class="column third">
<h1>Lickable Glossy Buttons</h1>
<p>So shiny you can just eat 'em up, these buttons are sure to impress your social media friends. Now available in easy-to-swallow capsules!</p>
</div>
<div class="column third">
<h1>Change-friendly Progress Bars</h1>
<p>We believe in change, and nothing better indicates upcoming change than a progress bar or meter. Now available in spinning beach ball flavor.</p>
</div>

Four products, no problem:

<div class="column fourth">
<h1>Child-safe Friendly Corners</h1>
<p>Safe and fun for the family, these rounded corners will win you over with the Web 2.0 generation and keep the children safe.</p>
</div>
<div class="column fourth">
<h1>Lickable Glossy Buttons</h1>
<p>So shiny you can just eat 'em up, these buttons are sure to impress your social media friends. Now available in easy-to-swallow capsules!</p>
</div>
<div class="column fourth">
<h1>Change-friendly Progress Bars</h1>
<p>We believe in change, and nothing better indicates upcoming change than a progress bar or meter. Now available in spinning beach ball flavor.</p>
</div>
<div class="column fourth">
<h1>Illusionary Drop Shadows</h1>
<p>Tired of the flat look? Use our illusionary drop shadows to add depth to any page. Stack your content and create a real* 3-D landscape. *fake</p>
</div>

This is the basic idea we’re going for. Keep the content manager out of the CSS and out of the tables by making it easier to use our classes.

So we’ve got our class names, now lets look at the actual CSS:

.column { /* Common styles across all columns */
float: left;
margin-right: .9%; /* IE6 has trouble with calculating percentages */
}
.half { /* Set width for split-column layout */
width: 49%; /* 50% - 1% right margin */
}
.third { /* Set width for three-column layout */
width: 32%; /* 33% - 1% right margin */
}
.fourth { /* Set width for four-column layout */
width: 24%; /* 25% - 1% right margin */
}

Only a few lines of CSS and we have a layout framework our content managers will be happy to use.

See Live Example

In the next article, we’ll look at adding a few more features to expand the power of our common CSS column classes.