3 Col semi Liquid layout

[betawaffles]

Is there a simple way to make the center column (the content div) but not the left and right columns in a 3 column layout using only divs and css? Lets say I want the content div to be 500px on a 1024x768 maximum sized window but when you move the window around, the content div gets smaller but never bigger than 500px. Am I making sense?

[matsko]

This is known as elastic layout design and is very useful for variable layout sizes.

You can use the min-width and max-width css properties. The only problem is that they do not work with IE6.

Well, there is a min-width hack for IE6, but maximum width effect won't work for IE6 on its own.

Basically.

The HTML:

<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>

And the CSS:

#left,#right { width:100px; }
#left { float:left; }
#right { float:right; }
#center { max-width:500px; }

This works, but IE6 won't like it. So in order to make it work with IE6 then you should use write a JavaScript onresize event which determines the size of the center box and sees if it goes over 500px.

Something like this:

* html #center { width:auto; }
* html #center.tooBig { width:500px; }

Then in Javascript

var centerDivWidth = ...
if(centerDivWidth>500)
centerDivWidth.className='tooBig';
else
centerDivWidth.className='';

[betawaffles]

Neat, I'll give it a try, but will this validate?

[betawaffles]

Seems to have worked but now when the right column hits the actual text (while the window is being resized) located in the center div it moves under it.

http://www.mediaatmidnight.com/test/test.htm

[matsko]

Set a maximum size for the container as well (100px + 100px + 500px + borders).

And yes, the CSS is perfectly valid

[betawaffles]

Actually it was the minimum width that had to be set! But thanks. It fixed the problem in FF but not IE. I added the javascript

var containerDivWidth = ...
if(containerDivWidth<877)
containerDivWidth.className='tooSmall';
else
containerDivWidth.className='';

and for css...

* html #container { width:auto; }
* html #container.tooBig { width:877px; }

But it didn't work

[betawaffles]

Actually that didn't work either, my content div does not adjust at all when minimizing in any browser, the container adjusts just fine though. The right div and content div fall under the left div when minimizing! Please help.

[betawaffles]

Adding the following to the center div sort of fixes this but causes my drop downs to appear behind it. It's also kind of a fudgy way of doing it since the pixels will render differently on browsers...

left:197px;
right:210px;
position: absolute;