CSS max-width columns

[karldesign]

I understand the problem that IE6 and lower does not read the max-width property correctly. That is why I have been using the following code as recommended overwhelmingly online:

 

#div_name{min-width:760px; max-width:955px; width:expression(document.body.clientWidth < 762? "760px" : document.body.clientWidth > 957? "955px" : "auto");}

 

This gives me the max-width functionality in IE6.

 

However, I have come unstuck...

 

If I have two columns, and I would like the right column fixed width 210px and the left column fluid width, the hack no longer works. See the code below:

 

/* css */
#left{margin:0; padding:0; float:left; background:#CCC; max-width:710px; min-width:760px; max-width:955px; width:expression(document.body.clientWidth < 762? "500px" : document.body.clientWidth > 957? "710px" : "auto"); height:250px;}

#right{margin:0 0 0 10px; padding:0 0 0 10px; float:right; width:199px; height:250px; border-left:1px solid #CCC;}

/* html */
<div id="left">content</div><div id="right">content</div>

 

The column does not scale and pushes the fixed column below.

 

Does anyone have a solution to this, and is it because it is nested within another div, using float properties?