Did you know that through the use of CSS 3 you can make beautiful columns of text without the need of a RapidWeaver plug-in of any kind?

It is pretty easy for even those who are easily intimidated by code.

For this tutorial we're going to be using RapidWeaver's built-in HTML Page Style and the Page Inspector's custom CSS field.

So, let's get down to business.

The first thing to do is to add an HTML Code page style to your project. On the bottom left-hand side of the main RapidWeaver window you'll find a small plus button in the corner. Click this button to add a new page style to your project.

A drop down menu will appear with a complete list of all the page style plug-ins that you have available to you. In addition to the default page styles that ship with RapidWeaver the is where you'll also find any page style plug-ins that you've purchased from other companies such as YourHead or YabDab.

From the drop down you'll be selecting the HTML Code page style:

From here you'll receive a blank window. This is the place we're going to pour out our heart, soul and code. OK. Well, just our code in this case.

Let's start with our HTML markup. It is super simple and while it looks like a lot, it is definitely not intimidating. Really, most of it is just filler type for now:

<div class="columns">
	<p>This is the area we'll place our text that we wish to have put into columns. This will be the content of your page that you're building. For now it will be filled with only this dummy text.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in augue at velit posuere lacinia sed vel sem. Cras placerat luctus sem vel vulputate. Aenean elit nisi, auctor a tincidunt in, rhoncus eu erat. Integer a arcu in nibh dictum dictum. Nunc hendrerit facilisis porta.</p>
	<p>Aliquam ante neque, malesuada quis euismod ut, vehicula condimentum felis. Suspendisse vitae nibh arcu. Quisque accumsan felis non turpis dictum id pretium arcu malesuada. Pellentesque iaculis magna at quam tempor fermentum. Nulla ut urna sit amet tellus tristique cursus.In hac habitasse platea dictumst. Aliquam augue massa, facilisis in commodo vitae, suscipit ac quam. Pellentesque leo purus, dictum ut tincidunt ac, volutpat elementum arcu. Curabitur ante lectus, auctor non blandit quis, varius et libero. Sed dictum odio vel felis sollicitudin at vestibulum risus posuere.</p>
</div>

After typing this into your HTML Code page, or copying and pasting it, you'll not get much of anything when you preview your page. In fact it will be pretty plain and boring.

Let's go over this real quick so we have an understanding of what's going on. We're creating a div with the class name of 'columns'. We're going to use this to be able to target this HTML with our CSS.

Inside this div we have several <p> tags. These paragraph tags designate where a paragraph resides. We'll use these to determine the spacing between paragraphs within our columnized layout.

The real magic comes from the CSS.

We're going to open the RapidWeaver Page Inspector now and head over to the Custom CSS field for this page. To open the Page Inspector you can either press Command-Shift-I or choose Show Page Inspector from the View menu.

Once in the Page Inspector we'll be heading to the Header tab:

We'll be focusing on the CSS tab toward the bottom of the Page Inspector under this Header tab (lot of tabs, huh?!).

This Custom CSS field allows you to have RapidWeaver insert your own CSS into the theme on a page-by-page basis. It is incredibly handy.

Our CSS is going to be as follows:

.columns {
       -webkit-column-count: 3;
       -webkit-column-gap: 24px;
       -moz-column-count: 3;
       -moz-column-gap: 24px;
       column-count: 3;
       column-gap: 24px;
}

.columns p {
	margin-bottom: 24px;
}

.columns p:last-child {
	margin-bottom: 0;
}

The first bit of CSS we see above is a class we've defined to style the columns. The column count specifies how many columns will be displayed. In this case we're going to do three. The column gap specifies the spacing, horizontally, between each column and we're using 24 px.

Below the main columns class we've setup the styling for our paragraphs that are displayed within the columns class. The first one sets a margin of 24 px on the bottom of each paragraph. The second paragraph styling we see, .columns p:last-child, makes sure there's no extra spacing on the last paragraph in the div.

That is it. You've got nice clean, CSS 3 columns of text. You can replace all of the dummy text with your own content. And a good thing about these columns is that they're completely flexible. So even if your theme has a fluid width that changes with the browser window, your columns will adjust.

Feel free to play around with changing the values of the column count and column gap as well.

Do note that CSS 3 columns are currently only supported in Safari, FireFox and Chrome. Opera and Internet Explorer visitors will still see your text however. It simply will not be in column form, but as a regular block of text.