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 this layout is probably for you.
Click here for the list of other layouts that are available
If you are an HTML/markup purist and have objections to background graphics and additional markup, this isn't the layout for you.
-- Ryan Chapin, Nuts & Bolts Interactive, Inc.
2 Column: Fixed Width with Left Side Bar, Content Area, without Footer
A straight-forward CSS layout. Because of the fixed widths this one doesn't seem to have problems with any modern browsers.
See the CSS markup for more details on this layout.
This set of CSS layout columns came out 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.
This is a css layout that is 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.
This CSS layout has been tested and works in the following OS/browser combinations.
There are very likely others that work that are not listed here. If you test additional OS/browser combinations and would like to have that information added to the list, click here to send me an e-mail.
- Windows 2000, XP, Vista
- Internet Explorer 6 (IE 6)
- Internet Explorer 7 (IE 7)
- Firefox 2.0.0.11 or greater
- Opera 9.26 or greater
- Mac OS X
- Safari
- Firefox 2.0.0.11 or greater
- Opera 9.26
- Linux
- Firefox 2.0.0.11 or greater
- Konqueror 3.5.8-32.fc8
License
This work is licensed under a Creative Commons Attribution 3.0 United States License.
Click here to read the full license
