Web designers are used to believe that in all browsers applies following conditions:
- A div is rectangular.
- Only one corner of a div can be absolutely positioned on a page.
- The location of the diagonally opposing corner must be determined by the width and height of the div.
- If the width and height are dynamic, they must be determined using JavaScript.
What usually struck us is point number 2. It’s assumed that if you assigned top, left, bottom, and right properties that most browsers would simply ignore two of those properties.
It seemed like a fair assumption at. We can expect some variation between the browsers. We also would expect all of them to ignore two of the four positions.
Though, Rob Swan from A List Apart found out that rule No.2 is not exactly true. He isn’t first to find this out: see Autistic Cuckoo and css-discuss.
For more about fixing all four div properties and how to overcome obstacles read Rob’s article: Conflicting Absolute Positions.