Main Content Area
Quick Points
- Fluid percentage width
- either fixed width sides or fluid
- fluid main content
- can be centered or full width
- full width header and footer
- not reliant on borders for sides so background images/transparency/%width sides can be used
- height inheritance is pursuant throughout
Longer Description
This layout template uses absolute positioning and almost relies on a browsers "knowledge" that an Absolutely Positioned (AP) element will "calculate" its height from its containing block providing the containing block is not position: static; (default).
IE is being "quirky" and stretching the divs and compliant browsers calculate the top/bottom co-ordinates as required.
The thin black 1 or 2 pixel borders are in place on each content column to show that each one is indeed the full height of the containing block. The main content column has been padded extra at both sides to show the light grey background (the #contentwrap/container) behind it.
The min-height on the wrapper div (#wrapper), is optional but it would give a short page some extra height. However a "hacked" height value must be declared for on this div for IE only. See source code comments.
Any vertical gaps in the borders are caused by rounding errors as this layout uses percentage widths and pixel borders which don't mix well. However this is for demonstration only and the layout can use background images on any/all of the elements/container divs, unlike the layouts which rely on borders to create side columns.
This particular layout relies on a main content column, which must be the longest for this layout to be successful. (Although this doesn't have to be the center column). I have another Multi Column CSS layout technique which produces the same effect as this except that the height is controlled by any/all columns. You may think that means it must be a fixed width becasue it is controlled by floated divs, but take alook you may be surprised!
This layout can also be amended quite easily to be fully fluid or to change the display order of the columns. For example to change from fixed width sides to percentage width sides just change the width of the two absolutely positioned divs then adjust the padding on the main content column to suit. e.g.
#apbg1, #apbg2 {width: 20%;}
#contentwrap {padding: 10px 21%;}
min-widths and z-index
... added a min-width to the wrapper div (and header/footer divs) to help avoid long words and/or images from "breaking out" of the layout when the viewport is too narrow. IE degrades OK it forces a horizontal scroll by default. I then added a z-index to the content column so that if there is an overlap of content it will show above the right column. Test: longwordtestlongwordtestlongwordtest
Caveat: IE must be in "Quirks Mode"....... here's why if you want to know....
Layout will fail in IE Strict Compliance Mode as it hasn't implemented the above specification, but instead it's tweaked to take advantage of IE's lack of support for the (default)overflow: visible; which stretches the container as opposed to overflowing it. This quirk used in conjunction with either an IE conditional statement or hack can be used to pass inheritance through the layout using a height value anyway. So this template includes the "<?xml version="1.0" encoding="iso-8859-1"?>" declaration to trigger Quirks Mode.
Note: This layout can be made to work in IE Strict mode with the use of IE Expressions to calculate the height of the 2 x side divs - see example