html css layout. Fixed total width, 3 columns, dynamic middle column

Question

Is this at all possible?
Sometimes the left menu is not there, so i want the middle col to take up that space too.
Sometimes the right menu is not there, so middle should take its space too.
All should be wrapped in a container with fixed width (1000px).

Answer 1

That can be done with ahem table-based layouts. Using floats, I believe you need to use some sort of logic to set the width of your middle column. This can likely be done in a single line of jQuery (test if the left column is present or empty, reset middle column width), if you don't want to do it on the backend.

Answer 2

You'll probably want to look at how to make equal height columns.

Also on this site, the author provides "The Perfect 3 Column Liquid Layout."

Answer 3

ALA has a old but brilliant answer that I believe could solve almost any similar question: http://www.alistapart.com/articles/holygrail/

Of course the problem's with the details: Do you want the contents in the middle column to resize based on the available space, or float up side-by-side to occupy the extra space. Adding to that complexity may be elements that are unstretchable (images, etc.), some that have a min- and max- width (paragraphs of text have a certain optimal range of widths for readability). Like I said, the devils in the detail - details which it seems only you possess at this time. With these much information this is all we could provide.

Answer 4

I'm assuming you can predict on server-side, whether a menu will appear or not, so you could just insert fixed width in your template, which saves you from any css-hacks.