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 uses prorietary CSS Expressions and compliant browsers calculate the top/bottom co-ordinates as required. (see source code for details)
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. 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
Note: This layout is similar to another which only works in IE Quirks mode - see example