Re: Basic Layout

[Merri]

The question is kind of bizarre in that you **must** give atleast some kind of date estimate on what you’d consider outdated. The reason is that when you jump to browsers of the 90’s you’ll soon find the only (somewhat) reliable solution is to use tables. And even then Netscape 4 will disagree with Internet Explorer 4 a lot of the time!

CSSplay gives a quite well working hack that doesn’t require a background image trick to imitate two equal height columns: http://www.cssplay.co.uk/layouts/three-column-layouts.html

It can fail on some mobile browsers though.

The most foolproof trick is to use a repeating background image. So you’d have something like this:

Main header

Footer

And to make things compatible in CSS:

#container {
background-image: src(repeating-column.png) repeat-y;
width: 100%; /* to put older Internet Explorers into “hasLayout” mode, gives a free “clear: both;” effect */
}

/* other browsers use this to clear floats */
#container:after {
clear: both;
content: ”;
display: block;
}

/* float content to the right */
#container .content {
float: right;
width: 70%;
}

/* while menu element is reduced by the width of the content */
#container .menu {
margin-right: 70%;
}

You could also float both elements but my personal preference is to float only if it is really required.