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.

seyDoggy Grid

Similar to the grid system found in the ExtraContent Snippets, this grid system makes better use of the available width, giving a better overall balance to the outermost edges of the layout.

The HTML

The example included here is a 3 column layout. Paste this anywhere in your content and replace the lorem ipsum text with your own. If you are pasting this snippet into a styled text area of RapidWeaver and not a plain text or HTML type field, you will need to select the code from start to finish, then go to Format > Ignore Formatting.

To change the layout from 3 columns to more or less columns, add or remove one or more of the following block of code:

<div class="seydoggyGrid">
	<div class="column three">
		<div class="content">
			<h2>Column 1</h2>
			<p>Lorem ipsum dolor sit amet,
			consectetuer adipiscing elit.
			Proin venenatis risus dictum mi.
			Etiam ullamcorper. Mauris justo.
			Fusce nibh quam, imperdiet at,
			nonummy.</p>
		</div>
	</div>
	<div class="column three">
		<div class="content">
			<h2>Column 2</h2>
			<p>Lorem ipsum dolor sit amet,
			consectetuer adipiscing elit.
			Proin venenatis risus dictum mi.
			Etiam ullamcorper. Mauris justo.
			Fusce nibh quam, imperdiet at,
			nonummy.</p>
		</div>
	</div>
	<div class="column three">
		<div class="content">
			<h2>Column 3</h2>
			<p>Lorem ipsum dolor sit amet,
			consectetuer adipiscing elit.
			Proin venenatis risus dictum mi.
			Etiam ullamcorper. Mauris justo.
			Fusce nibh quam, imperdiet at,
			nonummy.</p>
		</div>
	</div>
	<div class="clear"></div>
</div><!-- .seydoggyGrid -->

Once you've got the number of columns you want, change the latter class in each column from 'three' to the text equivalent of the number of columns desired, i.e. 'two', 'four' or 'six', etc...

For more advanced layout options you can use combinations such as 'two3rds' and 'three' with two columns of markup. The first column will take up the first two thirds while the last column takes up the remaining third. Have a look at the available styles in the CSS snippet and play with your own combinations, always keeping in mind that the sum of all your columns should always equal about 100%.

The CSS

To ensure that your layout is styled correctly, paste the contents of this snippet to Page Inspector > Header > CSS. The CSS will take care of the rest.

The CSS, by default, will support up to 6 columns and combinations therein. With a bit of math and CSS knowhow you can extend this indefinitely. Please don't ask us how, it's better for everyone if you learn a bit of CSS and tackle that task on your own. It shouldn't be hard to figure out though, going on the existing example as a guide.

/* @group seyDoggy Grid */
.seydoggyGrid{margin-left:-1em;}
.seydoggyGrid .clear{clear:both;}
.seydoggyGrid .column{float:left;}
.seydoggyGrid .one{width:100%;}
.seydoggyGrid .two{width:50%;}
.seydoggyGrid .three{width:33.33%;}
.seydoggyGrid .four{width:25%;}
.seydoggyGrid .five{width:20%;}
.seydoggyGrid .six{width:16.66%;}
.seydoggyGrid .two3rds{width:66.66%;}
.seydoggyGrid .three4ths{width:75%;}
.seydoggyGrid .four5ths{width:80%;}
.seydoggyGrid .five6ths{width:83.33%;}
.seydoggyGrid .column .content{margin-left:1em;}
/* @end */

How it looks