Grauw’s blog

I think one of the main reason for people cursing either CSS, or CSS its box model (content-box, as opposed to the border-box implementation in IE 5.x and IE 6.0 in Quirks mode), is the fact that if you give an element a width of 100%, and paddings or borders, the element will be wider than the browser’s window, causing scroll bars to appear.

This can be usually solved using a display: block; and width: auto;, which will cause the content’s width to be automatically calculated based on a margin width of 100%. However, there is no such thing for height, and it also doesn’t work for absolutely positioned elements.

In such a case, position: absolute; is your friend. This because on absolutely positioned elements, too, you can specify auto on width and height properties. By itself, this will do nothing, but in combination with the top, bottom, left and right properties you can say stuff like ‘put the right margin-edge exactly on the right, and set the left one to 0 as well, and let width be calculated automatically’. The fun part here is that width operates on the content box, while the other abovementioned properties work on the margin edges.

So, this is quite powerful. But, of course, IE is being stubborn again. The browser’s implementation of absolute positioning can not handle the case where the attachment to two sides is given, but the space inbetween is set to auto, which is precisely what we’re using. However, there is a way to solve this, by placing the following IE-specific code in your CSS (in particular, the part inside the rule with the * html selector):

div.test {
	position: absolute;
	top: 60px; bottom: 0; left: 0; right: 0;
	border: 5px solid green;
	padding: 8px;
	overflow: auto;
}
* html div.test {
	width: expression(this.offsetParent.clientWidth - 26 + "px");
	height: expression(this.offsetParent.clientWidth – 86 + "px");
}

Here you will have to make sure that the values ‘26’ and ‘86’ are actually the sum of the respecive element’s margins, borders, paddings, and left/right offsets for the width, and similarly for the height. Needless to say, these have to be given in pixels, too. If you do this, IE will take care of the element’s width, also when resizing. Note that you could also create a more elaborate script which reads out the element’s sizes and adds them together for you.

So, now we can happily enjoy a slightly larger bit of the full power of CSS, without being held back by IE. Rejoice ^_^!

This piece of code will stop your stylesheet from being validated with the CSS validator, but I’d say you’ll just have to take that for granted. If you insist on validation, you can place the code in the * html rule for IE in a separate stylesheet and import it inside conditional comments:

<!--[if IE]> (style link here) <![endif]-->

Update: I have made a demo, which you can see overhere.

Update: There’s also a pretty clean IE hack you can use to make width: auto work: IE marching bug.