# Absolutely Buggy II

## Absolute boxes inside relative boxes

Return to p.i.e.

The set-up: So you want to have a static container box in the normal flow, and in it you want to place an absolutely positioned element. It's understood that this element will calculate its position based on its nearest positioned ancestor, thus the container is given 'position: relative' to keep it in the flow, yet serve as a positioned holder for the absolutely positioned contents.

The demo:

This box (".container1", green border) has been given 'position: relative', making it a positioned container for the absolute boxes. (red and blue borders) It is dimensioned horizontally by margins and vertically by content. The corner boxes are given 'position: absolute', and placed in the corners by using the value '0' on 'top', 'bottom', 'left', and 'right', as needed for each element. Example:

    div.lowerleft {
       left: 0;
       bottom: 0;
       border: 6px solid #00f;
    }

Screenshots:

- Mozilla/Win2k Represents gecko in general.
- IE 5.5/Win2k Drop boxes. At least it's fixable.
- IE6/Win2k
Drop boxes, but more 'fun' than IE5.5
- Opera6/Win2k A work in progress?
- IE5.x/Mac/9.2.2/OS X A real head scratcher.
- Op5/OS X Drop boxes; all boxes shifted left as a group?
- IE4.5/Mac/9.2.2 Similar to last one.
- icab2.8/Mac/OSX My favorite!
- Navagator4.0.8/Mac/OSX It's what you'd expect from NN4.
- Navagator4.79/Mac/OSX It had to get better, and it did.

Behaviors: Current IE and Opera have some weird problems.
(so what else is new?) Most older browsers are scary as heck.

Moz/Gecko: Appears flawless. Open Source rocks!

IE5.5/Win: The upper left box (red) correctly touches the left green border, but overlaps the upper green border. the upper right box is the same vertically; however, it completely ignores the right green border, moving to the right viewport edge. The lower right box also moves all the way to the right, and both lower boxes (blue) ignore the bottom green border. You will find them way down, alongside this text.

IE6/Win: The blue boxes are strangely missing. But, as Lon Kraemer points out, they can be located way down the page if the page is reloaded after the browser cache is emptied. The exact vertical position depends on the 'text size' setting (boxes are lower with larger settings), and window size, which is even more variant. (this is a better browser?)

IE5.x/Mac: The blue boxes end up sitting on top of the red boxes!
It appears this browser thinks that the green bordered container box has a height of 0px. At least that would explain the placement of the red and blue boxes.

Op6/Win: Like IE, Op6 ignores the bottom green border, but does honor the right border. In addition, that browser displays a positioning bug unique to Opera, which is detailed in Going Absolutely Buggy.

Various others: You have to see it to believe it.

Quick quiz: Can you guess why IE and Opera (Windows) place the blue boxes where they are, vertically? See below for answer. (I've always wanted to do this)

Fixes: The IE/Win bug may be squelched by defining any width or height (any units) for the container box. Note: A width will also cure the 1px rounding error gaps seen (at some screen sizes) between the small boxes and the right/bottom green borders. See a similar Mozilla bug.

To fix Op6/Win, a height value must be applied to the container. A width will not cure this Opera bug. As for other browsers, you're on your own.

Demo, with declared 'height: 130px;'

Answer to quiz: when vertically positioning those lower blue boxes, IE5.5 and Opera treat the container as if it had a 'height' value of '100%'. In those browsers this is equal to the height of the viewport. To prove it, scroll until the top green border just touches the top viewport edge, and yes indeed, the blue boxes just touch the bottom of the viewport!

Screenshots thanks to Rob Stevenson, Lon Kraemer, Jeroen Van Gorkum, Philippe Wittenbergh, and Damelon Kimbrough of the css-d list.

Big John Contact me ©positioniseverything
Last updated: July 21, 2002
Created July 1, 2002