three column web design with variable sides

Question

I've been trying to come up with a way to create a 3 column web design where the center column has a constant width and is always centered. The columns to the left and right are variable. This is trivial in tables, but not correct semantically. I haven't been able to get this working properly in all current browsers. Any tips on this?

Answer 1

Use this technique, and simply specify a fixed width for the centre column.

Answer 2

Check this out: http://www.glish.com/css/2.asp

And replace the width: xx% for #maincenter by a fixed value. Seems to work when I change it with Firebug, worth a shot?

#maincenter {
    width: 200px;
    float:left;
    background:#fff;
    padding-bottom:10px;
    }

Answer 3

I think you'd need to start off with initial (fixed) widths for both sidebar columns and then, when the page loads, use javascript to get the window width and calculate the new width of the sidebars.

sidebar width = (window width - center column width) / 2

You could then reapply the javascript if the window is resized.

Answer 4

This article at A List Apart has a solution resulting in a 3-column layout that will :

• have a fluid center with fixed width sidebars,

• allow the center column to appear first in the source,

• allow any column to be the tallest,

• require only a single extra div of markup, and

• require very simple CSS, with minimal patches.