The only CSS layout you need(?)
One of the arguments for switching from table based layout into CSS based layouts are the flexibility CSS gives us. However, despite the flexibility, you have maybe experienced that the CSS layout you normally use didn't handle a specific case so you still had to edit, or perhaps totally restructure your HTML?
In this article you are presented to ten different layouts with example pages, all based on the same HTML.
9/14/2006
This article and the example pages are perhaps not the universal answer so the title is maybe a little bit overstated, but hopefully they can make it easier for someone. Furthermore, all the pages are also experiments in how to change a layout without having to use absolute positioning since this take the element out of the page flow. The changes in layout are made by changing mainly floating, margin and padding - no absolute positioning is used.
On the example pages you will find a short description on the page, and if you look in the source code everything is hopefully clearly explained.
As you can see on the images below the different elements in the layout have different colors for better visualization.
Three column CSS layout - left and right menu |
||
 |
Supports 100% height: Yes Supports Faux columns: Yes |
|
Two column CSS layout - top and left menu |
||
 |
Supports 100% height: Yes Supports Faux columns: Yes |
|
Two column CSS layout - top and right menu |
||
 |
Supports 100% height: Yes Supports Faux columns: Yes |
|
Two column CSS layout - left and footer menu |
||
 |
Supports 100% height: No Supports Faux columns: Yes |
|
Two column CSS layout - right and footer menu |
||
 |
Supports 100% height: No Supports Faux columns: Yes |
|
Three column CSS layout: 100% height with footer |
||
 |
Supports 100% height: Yes, this is a 100% height layout Supports Faux columns: Yes, this layout is made with Faux columns |
|
Three column CSS fluid layout: 100% width |
||
 |
Supports 100% height: Yes Supports Faux columns: No |
|
Three column CSS fluid layout: 100% width and with column borders |
||
 |
Supports 100% height: Yes Supports Faux columns: No |
|
Two column CSS layout - header and left menu |
||
 |
Supports 100% height: Yes Supports Faux columns: Yes |
|
One column CSS layout - top and footer menu |
||
 |
Supports 100% height: No Supports Faux columns: Yes |
|
About the concept and the HTML
The HTML and the concept used is a (tiny) rewritten version of Ordered Borders Layout (OBL) found at Position Is Everything, so if you know that solution the HTML and some of the CSS should look familiar. The reason for rewriting it was mainly that OBL didn't support 100% height and Faux columns didn't fit directly into the CSS concept.
The reason for using OBL is simply because the content comes first in the HTML code (after the header, before the menu/columns) which may benefit search engines, screen/speech readers and cellular phones.
Tested in IE6, IE7, Firefox 1.5/2.0, Opera 9.01 and should work in Safari also.
