You can use the Bluprint CSS framework to easily create complex multi-column layouts. Some people are against using CSS frameworks because the class names are not semantic, and are instead used to specify the layout. In that sense the frameworks are mixing presentation into the markup. But even if you don't want to use it on a production site, you might still find it useful for rapidly prototyping a layout.
To get started:
Download Blueprint and unzip it to a folder on your PC.
Under the sub-directory called 'Blueprint' there are 3 css files called 'screen', 'print', and 'ie'. Upload those to your server.
Create a new HTML file and link to the screen.css file.
You can turn on the background grid by applying the showgrid class to a containing element (see footnote below)
In screen.css file, you will find the basic classes of Blueprint. The span classes, .span-1, ... , .span-24, define how many columns wide the element should be. If you want 5 columns for your div element then you give it the span-5 class. In Blueprint, each column is 40 pixels wide, and there are 24 columns total.
The span classes will also work for inputs and textareas in a form. The Blueprint CSS defines separate rules for these to account for padding and borders. That's why in screen.css you'll see selectors like these:
input.span-1,...,input.span-24 and textarea.span-1,...,textarea.span-24.
append classes, .append-1, .. , .append-23, add empty columns to the right, prepend classes, .prepend-1,...,.prepend-23, do the same for the left side.
The pull class, .pull-1,..,.pull-24, allows you to display a column in a different order than it occurs in the markup. So suppose you want to interchange the position of two columns. You can pull one column to the left, and push another column to the right, but without having to change their order in the markup. The push classes are called: .push-1,..,.push-24.
YOUR FIRST BLUEPRINT LAYOUT
To create your first layout it's just a matter of creating some DIVs with specific class names. Don't let the span class "boldtxt" confuse you. It is not part of Blueprint and is only there for styling the beginning text of each block, .boldtxt { font-weight: bold; }
Start with something simple like 2 columns:
The first div occupies 5 columns and the main div is 19, totaling 24 columns for the entire layout. They are going to be positioned side-by-side. No need to float any elements. The framework will take care of the layout for you. The output of Example 1 for the 2-div layout.
You always start with a 'container' div to hold the layout, then add DIV's that span a certain number of columns. Blueprint defines a grid with 24 columns, so in the above example we have a left sidebar take up the first 5 columns and the main content take up the remaining 19.
To accomplish that, we just use class names span-5 and span-19. but also notice that the last column has the class 'last' as well. You always add class 'last' to the last column. (The only exception is if you have a single full width column using span-24, in which case you can leave the 'last' class out.)
You can also turn on a border on the right side of the first column. That can be done by adding the class 'border' to the first column div. The 'border' class always does the same thing: turn on a border on the right hand side of the given element.
Now suppose we want to add a right sidebar to the above example:
Notice that we reduced the big span-19 column to span-14, to make room for the new right column span-5. Your total number of columns should not exceed 24.
Example 2 showing a three column layout
So far, so good. Now there are several directions we could go to make a more complex layout. First, let's add a whole other set of columns beneath the first set. For the new columns, lets have two columns that each take up half the width of the page:
Example 3 with the addition of two fat columns in the bottom that span the entire width of the layout
Another thing we can do is take a div that's spanning X number of columns and start a new layout within it. So for this example, let's create a new row where the center column is further sub-divided into three new columns. We want these columns to show up directly under the existing center column:
In the new row, we have a span-12 div, but we added prepend-5. That will result in 5 columns of left padding, and will make our 12 column div show up directly under the existing center column.
Next, we define three new span-4 div's within the span-12 div. The only constraint is that the sub-layout must not exceed the number of columns in it's parent div. In this case the parent is span-12 and we added 3 sub-columns that are each span-4 (3*4 gives us 12).
We could have accomplished this layout without the span-12 div in the 2nd row, but the point was to show that you can in fact nest another layout within an existing div. In this case we just created three new "sub-columns", but we could have made this more complex by adding additional rows within the span-12 div.
Example 4 with three sub-columns underneath the main content
(1) If you want to have the Bluegrid standard background to show, include the showgrid as one of the classes for the element. The Blueprint showgrid class is simply a background call to their PNG file: .showgrid {background:url(src/grid.png);}