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?