If you are a practical web designer that is looking to use a fully compliant CSS layout that:
- Validates (both the markup and the CSS)
- Is easy to customize and (relatively easy to) understand
- Maintains it's integrity with floats and clears in the columns
- Does not contain incomprehensible CSS "hacks"
Then the following layouts are for you.
If you are an HTML purist and have objections to background graphics and additional markup, you probably won't like these.
Below are links to a set of CSS layouts that were developed because of the need to have
multi-column CSS layouts that would enable the use of
dynamic content while maintaining the integrity of the page.
When I first started this project I found many different types of CSS layouts for multi-column pages, each of which fell apart when you started adding floats and clears in the columns.
What follows is a set of CSS layouts that are designed to work across all of the major platforms and modern browser combinations, and designed such that you can include any sort of content in the different columns without it interfering with content and layout in other columns.
If you find any bugs or have any problems with them, click here to send me an e-mail.
|  |
A fixed width layout with a fixed width side/nav bar on the left-hand side of the page with footer. |
|
| |
A fixed width layout with a fixed width side/nav bar on the left-hand side of the page sans footer.
|
|
| |
A fixed width layout with a fixed width side/nav bar on the right-hand side of the page with footer. |
|
| |
A fixed width layout with a fixed width side/nav bar on the right-hand side of the page sans footer. |
|
| | A liquid layout that fills the browser window with a fixed width left-hand side bar.
|
|
| | A liquid layout that fills the browser window with a fixed width left-hand side bar an no footer. |
|
| |
A liquid layout that fills the browser window with a fixed width right-hand side bar.
|
|
| |
A liquid layout that fills the browser window with a fixed width right-hand side bar and no footer. |
|
| | A layout with three columns: one on each side of the page (fixed width) with the center column filling the browser window. Includes a footer at the bottom of the page.
|
|
| |
A layout with three columns: one on each side of the page (fixed width) with the center column filling the browser window, and no footer.
|
|
© Copyright 1997-2008
Nuts & Bolts Interactive, Inc.
All Rights Reserved
301-946-5400
PO Box 1841
Silver Spring, MD 20915
Serving the Greater Washington D.C. Metro Area
Rockville, Gaithersburg, and Northern Virginia
Intranet Login
