Column Layout
This template makes heavy use of generic CSS classes, so it’s very easy to customize to your needs. The basic layout elements are width and float classes:
- Width: .width25, .width50, .width75 and .width100
- Float: .floatRight and .floatLeft
These are used together to create all the different column layouts. For examples of this check out the style page. The one catch with using them is that you must make sure that together, your column widths don’t add up to over 100%. Otherwise the rightmost column will be pushed down.
Element padding within the columns is handled by the contained elements. The reason for this is because when you apply padding to a container with a defined width, browsers will apply this inconsistently.
Images
To position images inline with the text, the same generic .floatRight and .floatLeft classes can be used. The top level headings all have clearing applied to them, so images won’t “escape” their sections.
Header Image
The header image is defined as a background, so it’ll expand and contract as needed to accommodate the menu. Because of this, you should choose an image with a lot of room to grow vertically.