About

CSS (3)

JavaScript (6)

Web browsers (2)

 

Blog

CSS

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:

  1. It requires JavaScript to be enabled in the web browser.
  2. I've noticed that in some seldom scenarios, the expressions interfere with each other and consequently hangs the web browser (this is because expressions try to change the width during the whole page session). Personally, since JavaScript is necessary anyway, I think a better approach is to use a window.onload script.

For competent web browsers

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;
}

For Internet Explorer (at least up till version 6)

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");
}