Simple CSS 100% Height and Width!

My only question is: HOW THE HELL DID I NOT KNOW ABOUT THIS?

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: http://www.alistapart.com/articles/conflictingabsolutepositions/

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:

http://www.sugarandsalts.com/100percentbaby

Complex backgrounds with 100% width and Absolute Positioning

Lately one of our designers has been sending down a lot of psd layouts with complicated background elements, involving the need to tile-x a repeating background, but still have a "static" type background at least 1500px wide, without creating horizontal scroll bars for smaller viewports.

After doing some digging around, the best way I've come up with for dealing with this particular issue is to set the x-repeated background as the body background, then absolutely position a layer behind the rest of the page, set to width: 100% and background: no-repeat.

Annoying? Yes.