Joho the Blog
An Entry from the Archives

You're describing the holy grail.

Lucky for you - this has been found/built and documented already!

http://www.alistapart.com/articles/holygrail

There's a number of methods with CSS for having a few fixed columns and a fluid one. Probably the easiest (and one that will match your design goal of content-first) is to give your center column right and left margins that match the widths of your right and left columns. Then us absolute positioning to put your columns where those margins sit.

Something like this:

#center { margin: 0 250px; }
#left { width: 250px; position: absolute; left: 0; top: 0; }
#right { width: 250px; position: absolute; right: 0; top: 0; }

Then you'll create your content with the divs in this order: center, left, right.

You'll probably want to play with the margins a bit. Depending on padding and margins of the elements contained in the columns, things may work better if the width of the side columns are 20px or so narrower than the side margins on the center column.

Feel free to shoot me an email if you need some assistance.

Oh, and hte MT tag problem... just ignore it. When you install those templates and actually output the page, those tags won't exist. They're only in your template.

If you want to check for validation on your template, go into MT and create a new index template (call it test or something) and have it output to test.html instead of index.html. Then rebuild that template and run your new http://www.hyperorg.com/blogger/test.html page through the validator.

This MT code looks incorrect:

It should look more like:

id=">

That might be part of the problem

> (One enhancement I can't figure out how to do:
> Have the left and right boxes be fixed in their
> size while allowing the center one to resize as
> the user resizes the window.

I've tackled this a couple of times and find that tables are a reliable bet when you need stretchy behavior that is consistent and predicatable across many browser versions.

But nevertheless I'll bite...

Try using a combination of absolute position and "right" in addition to the usual "left", as done here:

http://blog.grumet.net/etc/joho1.html

http://blog.grumet.net/etc/joho1.html.txt (source)

But notice that the fixed column widths do not perform well as the font size is bumped up and down. This can be fixed with font-relative em units:

http://blog.grumet.net/etc/joho2.html

http://blog.grumet.net/etc/joho2.html.txt (source)

...which is vastly better IMHO.

Hope this helps.

Also, don't miss Chris Pederick's Web Developer extension for Firefox and Mozilla. It ships with several CSS tools including live editing. It's a tremendous learning tool.

http://chrispederick.com/work/webdeveloper/