I had the need to set two columns' width, depending if it's sibling column got content (through a CMS system)that made it wider than it should be. Basically, how a table would react to such a scenario, but still with the control through CSS and not using table cells. In the code shown below, this means that if the left column would get content with a width of 400 pixels, the right column would adapt and become only 100 pixels wide.
I've used the table-cell display for standards compliant web browsers, and CSS expressions for Internet Explorer. Two downsides for this approach in Internet Explorer are:
div#main-col{
display:table-row;
width:500px;
}
div.left-col, div.right-col{
display:table-cell;
vertical-align:top;
}
div.left-col{
width:300px;
}
div.right-col{
width:200px;
}
div#main-col{
display:block;
}
div.left-col, div.right-col{
display:block;
float:left;
}
div.left-col{
width:expression(this.nextSibling.offsetWidth > 200 ?
(this.parentNode.offsetWidth - this.nextSibling.offsetWidth + "px") : 300 + "px");
}
div.right-col{
width:expression(this.previousSibling.offsetWidth > 300 ?
(this.parentNode.offsetWidth - this.previousSibling.offsetWidth + "px") : 200 + "px");
}