three column web design with variable sides

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?

From stackoverflow dbrien

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

  dbrien : Thanks, that seems to do it. Now I'm going to figure out why you need so many nested divs.

  Sam Murray-Sutton : I'm getting a 404 when I try to check that link... do you need to edit the html?

  Jim : Thanks for pointing that out. The page moved from .html to .htm for some reason. I've updated the link now.
  From Jim

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

  dbrien : I guess this would depend on whether or not you want your site to display the same when people turn javascript off. That's another question though.
  From adam

• 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;
   }
  

  From David Cumps

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

  From davebug