Chapter 6
Chapter 6 shows how to create more advanced multi-column layouts using faux columns - the only way to create the effect of all columns being the same length with CSS. Available downolads are the HTML files of the screenshots, organized by the book's figure numbers.
.zip of Chapter 6 - screenshot files
A 'more robust' fluid layout
3 Column Fluid Layout revised. Click to view, right-click and select "save Target As..." to download.
Please note: Here is a revised version using the only technique I have discovered, my trusty friend negative margins, that enables the essential features of:
- a fluid center column
- max and min widths (as described on page 251) and
- a footer that always sits below the longest column.
It is very bare bones and I have not added the faux columns here, as I want to keep this example focused on the method used to achieve this effect. Anyway, you will want to build it out with your own content. Don't forget to revise the script tag in the head of the file so its URL points to the min/max width file, which is included in the main file download (javascript folder, Chapter 8) if you want to be able to constrain the max and min widths to which to layout can be sized.
As you will see from the code, there are two wrappers for the columns, one that goes around all three columns, and one inside of the first that just goes around the left and center columns. The negative margin on the two column wrap draws the third column into its space, like some kind of CSS black hole. It has a zen-like simplicity which is very pleasing, at least to geek like me : ). If you use it, let me know how it works out for you. Just so you know you are not being used as guinea pigs, I have used this template with good success on a couple of sites recently.
This is the companion web site for the book "Stylin' with CSS - a designer's guide" published by New Riders Books, May 2005.
Buy additional copies of Stylin' with CSS from Amazon at reduced cost.
Codin' for the Web now available!
Codin' for the Web teaches programming techniques in XHTML, CSS, PHP and SQL to enable you develop the three-tier architecture (interface, middleware and database) that forms the basis of all modern web sites.