Thursday, July 19th, 2007
Conflicting Absolute Positions
<p>Rob Swan has a new article about Conflicting Absolute Positions that delves into the realization that conflicting absolute values for top, left, right, bottom, result in browsers stretching their content in all but IE 5 / 6, and Rob has a work around for that too.To get this effect:
- We specify the width and height of the body as 100%. (This is actually only needed for our Internet Explorer solution, but there’s absolutely no harm in including it in our main CSS.)
- We hide the overflow in the
bodyandhtmlbecause we never want to see those scroll bars again. - We set the
overflowto “auto†for the left and right panels, and hide it in the header. - The header has a width of 100% and a constant height of 80px.
- For the side panel we specify the
top(header height + padding),left(padding), andbottom(padding) positions. Then we give it a constant width of 200px. - For the right panel we specify the
top(header height + padding),left(padding + side panel width padding),right(padding) andbottom(padding) positions.
Related Content:
4.2 rating from 28 votes
This doesn’t even have a pretense of being about anything to do with Ajax. Ironically, the Spam Question asks me what the topic of the blog is, and I have to lie to post this comment.
It could be about Ajax, if the CSS was styling a page that used Ajax as well. You probably couldn’t get that from the article though, because I made it up, in my head. My spam question was at least correct …
Perhaps not Ajax, but very useful indeed — will be used in Ajax layouts, I’m sure.
Very, very cool!
One thing the article does not mention is that you can use the IE5/6 hacks for IE7 if you have to use quirks mode for some reason. I know that using quirks mode is lame, but very often this does not depend on you and you have to deal with it. The best example is when you are writing a widget and can’t control where your widget gets hosted.
–
Hristo Deshev