Simple CSS 100% Height and Width!


Here's what happened. My earlier blog post about the 100% width absolute background element turns out was totally wrong. IE7< was glitching on this, causing a width of closer to 130%. Digging around the internet for an explanation for this bug(?), I came across this helpful post on A List Apart:

Basically, it mentions that some browsers don't play nicely when you mix percentage widths and fixed widths together on the same page. But that's not the important part - what is, is the solution it provided.

Take a div. Position it absolutely. Now give it left:0 and right:0 positioning. What is your first instinct will be the result? Mine was that it would default to the position which is declared lower in the style declaration. But the reality is much much sweeter. What you are in fact indicating is that the left most corner of the div should be at left:0, and the right most corner of the div should be at right:0. The result? 100% width. Now you may be thinking, can the same thing possibly apply to height? Guess what.....IT DOES.

The catch - it doesn't work in IE5 or IE6, and there is a teeny glitch in Opera. However, the List Apart article provides some work arounds for the IE issues. And if you or your development company has gone the way we have, as well as many other large internet presences, you can forget IE5 and 6 altogether these days, instead recommending your user to upgrade.

*waiting for the flaming from that comment. Oh wait, no one reads this blog. Phew.*

Here's my sample if you want to see it in action: