WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: 3 column layout question

for

From: phil smears
Date: Oct 29, 2006 1:50AM





Hi Martin,

If the left nav has something like
position:absolute; width: 200px; top: 85px; left 5px

then your right column has something like
position: absolute; width: 250px; top: 85px; right: 5px

and the centre body area has
position: absolute; top: 85px; left: 210px; right: 260px

you can then put the code for those blocks in any order in the HTML.
Jon

----------------------------------------
Mayhem Design
Web Development
http://www.mayhemdesign.com


Hi Martin,

It is a nice easy way to do things and also reasonably robust across a
variety of browsers.

There are a couple of problems, though, with the layout recommended
above.
The footer has to go in one of the columns as opposed to at the bottom
of all three.
The fixed width nature of the two side columns means horizontal
scrolling starts occurring at one font resize above default.

You don't have to use absolute positioning to put navs before content or
vice versa in source order, you can use floats. The advantage with
floats is you can get the footer below them. The only way you can do
that with absolutely positioned columns is with JavaScript. However with
JS turned off the resulting effect on layout would be so catastrophic I
wouldn't recommend that.

I'd Google faux columns and take it from there.

Phil Smears
Web Consultant

Mob: +44 (0)7786 117012

<EMAIL REMOVED>
www.sdesign1.com