Basic Layout

[shon]

Hey guys,

I am making a simple css layout.

Fixed-width, two column, vertical navigation on the left, content on the right, with a header and a footer, left-aligned. As simple as it gets.

My question is:

What is the fool-proof proper way to do this.

I need this to work on any browser, no matter how outdated, any device without any problems.

I know of many methods on how to do this such as floating left and right, using negative margins, absolute positioning.

I am looking for a definitive answer on what is considered the best-practice to do this. There must be a method that is considered the ‘right way’.

I feel silly asking this question here but after scouring the web through a septic tank of out-dated information I have come up empty handed for a modern authoritative answer.

Thanks in advance for your help.

[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.

[Author]

Posts