the basic layout… #2


outer containers exposed…

The outermost wrapper (#wrapper - solid black outermost border) controls min/max width for the construction.

Second wrapper (#iewrapper - dashed red border) is redundant, but used to provide proportional, 'em' controlled, space in header-area.

Third wrapper (#superwrapper1 - dashed blue border) creates space for the fixed-width side-column alongside the fluid main-column.

Forth wrapper (#superwrapper2 - solid red border) is redundant, but used for styling the side-column/footer edges as part of the “equal height” illusion.

Fifth wrapper (#superwrapper3 - solid aqua border) is pulled out over the edge of third and forth container, and contains all content-columns.

this is a demo…

I have written an article about this layout.

sincerely  georg; sign

Hageland 13.nov.2007
last rev: 13.nov.2007

the basic layout…

NOTE: there are a few pixel dimensional error here and there in the layout itself, because I have not compensated for the width of the many borders added for visualization.

However, as you can see: the basic construction can take that, and a whole lot more, without falling apart. I have overcompensated for Internet Explorer's many dimensional bugs, and this makes the layout robust™ in all browsers.
— Georg

site layout…
…2004 - 2007

site header graphic