Practical CSS Layouts that WorkIf 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"
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. Or, if you don't see a layout that you would like, send me an e-mail and as soon as I have time I'll put it together and post it to the site.
- 2 Column CSS Layouts
This set features a series of two column CSS layouts. There are a variety of 2 column variations: left side bars or nav bars, right side bars, headers and footers. This set will render the columns based on the amount of content in them. Such that if there is only a few lines in either column and the browser window is opened taller, the background image will show below the columns. In some cases this is exactly what the designer wants. If you would like full screen layouts, see links below.
- 2 Column Full Screen CSS Layouts
This set of CSS layouts features full screen rendering of the columns. Meaning, regardless of how much content that you have on the page, both of the columns will render the full length of the browser, no matter how big the window.
- 3 Column CSS Layouts
A set of three column CSS layouts that include a number of different variations: fixed widths and liquid layouts as well as versions with and without headers and footers. This set will render the columns based on the amount of content on the page. For full screen layouts see the link below.
- 3 Column Full Screen Layouts
This is a set of CSS layouts that I have not seen anywhere else. Which, is the reason why I built them. They solve a unique problem, allowing the designer to display three columns that are full screen, regardless of the amount of content in any of the columns. Similar to the other layouts, they maintain their integrity with nested floats, validate and even work in IE 6.