Fluid Columns

How To Customize the Columns

There are 5 different widths defined in the style sheet that allow you to customize how many columns the template has:

1. width25 25 percent width
2. width33 33 percent width
3. width50 50 percent width
4. width75 75 percent width
5. width100 100 percent width

To use them, create a <div> tag and apply the class. To position the columns, use the floatLeft and floatRight classes. This is possible because you can stack CSS classes on an element.

If you want columns to be side by side, make sure the widths added up don't go over 100 percent. If they do, the rightmost column will be pushed down.

Below is an example of the skeleton code used to generate this layout. Notice the leftColum class used on the leftmost column. This is to make the column line up properly with the header. If you are using a gradient on this column, you won't need to use this class.

<div class="width25 floatLeft leftColumn">
Left Column content
</div>

<div class="width75 floatRight">
Right Column content
</div>

Gradients

The gradient class can be used in any column. It will create the grey fade you can see in this column. Using it is very straightfoward:

<div class="gradient">
Column content
</div>

Alignment

Padding and Margins

All padding and margins are applied to the html elements rather than their containers. This was done for two reasons:

1. Dodge the difference in how browsers apply padding and margins. Since padding and margins are applied to children, and not the containers, all browsers consistenly draw the containers at the same width.
2. Give elements the same alignment with and without the gradient containers.

Images

Images are fully supported using the floatLeft and floatRight classes. Just apply one of them to the image you want to position. Images that have link tags around them will also have a nifty rollover effect, as long as you're using a standards complients browser. If you're not, well then no rollover effect for you.

Floating

The floatLeft and floatRight classes aren't just for images and columns. You can also use them on any element. Try it on the main menu to have it align to the left or right.

Template Width

Fluid vs. Fixed

Out of the box, this template fills 94% of the screen width up to a maximum of 1000 pixels. This was done for readability at high resolutions. If you'd like to change this template's width, or make it entirely fixed width, you only need to change the following CSS:

#content,
#width {
/* max-width hack for IE since it doesn't understand the valid css property */
width: expression(document.body.clientWidth > 1000 ? "1000px" : "94%");
max-width: 1000px;
margin: 0 auto;
}

#content[id],
#width[id] {
width: 94%;
height: auto;
}

The values you'll want to change are the 1000 and 94%. The width: expression bit is specific to IE, while the rest is for all compliant browsers. Here's an example of fixed width:

#content,
#width {
width: 770px;
margin: 0 auto;
}

#content[id],
#width[id] {
height: auto;
}