Column-1 First in Source Order
This layout has the main content first in the source order for SEO benefits. It has been debated whether or not this has any SEO merit, nevertheless some people with screen readers do still prefer to access the main content first.
~ Hybrid Features ~
Sunset Oak
With this layout the side column widths are fixed at 165 pixels and the center content is liquid. Any changes in the browser window size or font sizes will not affect the side column widths. I choose this layout with fixed width side columns for the sake of vertical menus and small images that are set in pixel widths, it is what suited my needs. The layout is flexible with min & max widths as browser window or user font is resized. The width is set at a default of 85% in between min & max. The max width is set at 65 em's, this causes the entire layout to grow in elastic effects in proportion to the users font size. The font size in the body properties is set at 85%, if it were to be increased to say 90% then the max width should be decreased to about 60 em's.
~ Equal height columns ~
Mt. Shasta
The left and right column colors are the #wrapper div background showing through. A different left column background color can be achieved by using a repeating image on the left side of the #wrapper div. This #wrapper div was not in the original layout, the side column colors were sourced from the body background color. I choose to keep it available for a fixed background image, as seen on this page.
~ Original Author Comments ~
Mt. Rainier
"There is nothing special about this demo as similar techniques have been used before, however they are not usually integrated into one example. The secret to this demo is the left and right columns which are floated negatively from the centre container. If you float them completely in the gaps at the side then they don't clear the footer. However if you leave them overlapping the centre content by 1 pixel then the footer is pushed down as required. Or you can float them completely to the side and just add some padding bottom to the columns to clear the footer."
