3 column layout

[JWL]

Hi all

I'm attempting to create a layout based on this one:

http://www.drugs.gov.uk/error404

After wading through that site's CSS (there's a lot of it), I extracted
the essence to the following:

http://www.sarroukhs.f2s.com/test/

This seems to work fine in IE5/6/7, FF2, Opera and Seamonkey.

A few questions:

1. On the drugs.gov.uk page, the right column behaves like a table cell,
stretching to the height of the other columns. Presumably this is some
trickery with background images but does anyone know how this is done? I
mean, how can background images be used when the width of the column is
not known?

2. When I boost the font in Firefox, the text spills out of the columns.
When I boost the font in Opera, after hitting a certain size the
rightNav column falls below the content column. The font has to be
pretty big in both cases for these things to happen. Would you consider
this to be a problem with the layout or is it more like inevitable
collateral damage? What, if anything, should I do about it?

Input greatly appreciated.

[Beauregard T. Shagnasty]

JWL wrote:

I'm attempting to create a layout based on this one:

http://www.drugs.gov.uk/error404

After wading through that site's CSS (there's a lot of it), I extracted
the essence to the following:

That seems to be the hard way.
A quick google for: CSS 3 column template
produces dozens of results, such as:

http://www.maxdesign.com.au/presentation/page_layouts/
--
-bts
-Motorcycles defy gravity; cars just suck

[Bergamot]

JWL wrote:

>
http://www.drugs.gov.uk/error404

the right column behaves like a table cell,
stretching to the height of the other columns.
how can background images be used when the width of the column is
not known?

The width of the column *is* known, it's just set in % instead of px, so
it adjusts with the window size.

This is done using wide graphics that repeat on the y-axis, and a
percentage based position. On the above page the effect for the right
column is with a 3000px wide bg image that has the gray coloring in the
rightmost 600px (20% of 3000). When you position it right 80%, only the
rightmost 20% of the container is gray.

The image is at
http://www.drugs.gov.uk/static/drugs...ightnav_bg.gif

I've used this technique before and it works well. You just have to be
thoughtful about the backgrounds and text colors you use, and make sure
that text is still readable when image loading is disabled.

2. When I boost the font in Firefox, the text spills out of the columns.

The result of using (too) narrow columns and long words. Sometimes it's
better to use em widths, sometimes % is preferable. Choose the lesser of
the evils for your particular content.

--
Berg