/* generic 2 column layout (c) 2007-01-22 s1webmedia.co.uk FIXME - remove clear div - put clear:both in footer FIXME - add conditional ie6.css +- - - - - - - - - - - + - <- viewport | +- - - - - - - - - + | ^ <-- container - centred + v-stretched | |+- - - - - - - - +| | | => need faux column img for backgrounds | || header || | | => width(s) based on topbanner image | |+- - - -++ - - - +| | - | || left || right || | / // // // / | || || || | | |+- - - -++ - - - +| | - left/right stick to bottom of container | || clear || | | => guessed height of footer FIXME | ||+- - - - - - - +|| | | | ||| footer ||| | | | ||+- - - - - - - +|| | | | |+- - - - - - - - +| | v | +- - - - - - - - - + | - +- - - - - - - - - - - +

...

*/ #div { /* debug */ border:solid #f00; border-width:1px; } /* default */ * { padding:0; margin:0; border:0; } html,body { height:100.1%; } body { text-align:center; min-height:400px; /* for mozilla/opera/safari */ } /* container */ #container { margin: 0 auto; /* centre */ text-align:left; width:740px; /* topbanner.png width */ position:relative; min-height:100%; height:auto; } * html #container { /* hack for ie */ height:100%; } /* top */ /* left 1 column */ #left1col { margin:16px 24px 5em 16px; float:left; xwidth:699px; } * html #left1col { /* hack for ie */ margin-left:8px; } /* left */ #left { margin:16px 0 5em 16px; float:left; width:338px; } * html #left { /* hack for ie */ margin-left:8px; } /* right */ #right { margin:16px 16px 5em 0; float:right; width:338px; } * html #right { /* hack for ie */ margin-right:8px; } /* clear */ #clear { clear:both; } /* bottom */ #bottom { position:absolute; bottom:0; }