From the ExtraContent GoogleGroup:

The strength of ExtraContent for both the theme developers and end users is the common experience in it's use and application. For this reason we thought long and hard to come up with an appropriate naming convention and common application to help ensure that end users who have experience with one instance of ExtraContent will be familiar with another. This also allows for shared resources between RapidWeaver developers, such as snippets, tutorials, manuals, etc... Read More...

Tags: ExtraContent

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

Recently (and I mean more recently than the date of this fake plog post would lead you to believe), Ben Counsell of Realmac Software wrote a post on using multiple css classes on a single HTML element. He hits on a few good points, but as for myself, dealing with the sea of id’s and classes that we have to work with in RapidWeaver theme development Read More...

Tags: CSS, how-to, multiple, classes