Thursday, July 19th, 2007

Conflicting Absolute Positions

Category: Articles, CSS

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:

  1. 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.)
  2. We hide the overflow in the body and html because we never want to see those scroll bars again.
  3. We set the overflow to “auto” for the left and right panels, and hide it in the header.
  4. The header has a width of 100% and a constant height of 80px.
  5. For the side panel we specify the top (header height + padding), left (padding), and bottom (padding) positions. Then we give it a constant width of 200px.
  6. For the right panel we specify the top (header height + padding), left (padding + side panel width padding), right (padding) and bottom (padding) positions.

Conflicting Absolute Positions

Posted by Dion Almaer at 12:39 am

4 rating from 33 votes


Comments feed TrackBack URI

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.

Comment by Trevor — July 19, 2007

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 …

Comment by Dan — July 20, 2007

Perhaps not Ajax, but very useful indeed — will be used in Ajax layouts, I’m sure.

Comment by Jon — July 20, 2007

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

Comment by Hristo Deshev — July 22, 2007

Leave a comment

You must be logged in to post a comment.