Shawn Allen <shawn@trnsplnt.com> wrote:

> In IE6, you'll probably notice that none of the links in the "sidebar"
> or the "UPDATE" button at the bottom are clickable.

Float-related z-index issue again.

I think I kind of understand why this is happening now. If you float an
element, it only pushes text aside. It does not affect the padding of the
parent element:

  +--------------------+-- padding box of parent element
  |XXXXXX              |
  |XXXXXX              |
  |XXXXXX              |
  |                    |  XX - floating child 1
  |                    |
  |                    |
  +--------------------+

And so by normal CSS1 box model rules, it cannot affect the positioning of
a child of the parent element that follows it:

  +--------------------+-- padding box of parent element
  |XXXXXX-------------+|-- padding box of non-floating child 2
  |XXXXXX             ||
  |XXXXXX             ||
  ||                  ||
  |+------------------+|  XX - floating child 1
  |                    |
  +--------------------+

This is what you expect - text in can wrap around a floated element which
is in its parent.

But look! The floating child and the non-floating child clash, sharing the
same space. Who gets to be on top? Neither has a z-index, so they both
have the same stack level. And CSS says:

  Boxes with the same stack level in a stacking context are stacked
  bottom-to-top according to document tree order.

So, the non-floating child must be on top, because it comes later in
the document than the floating child. Unless I've missed some part of
the spec somewhere, IE6's behaviour is CORRECT.

So, solutions? Either give your #sidebar 'position: relative' and a positive
z-index to make it rise above its sibling, or specify a left-margin on
#content large enough to accomodate the sidebar:

  +--------------------+-- padding box of parent element
  |XXXXXX+------------+|-- padding box of non-floating child 2
  |XXXXXX|            ||
  |XXXXXX|            ||
  |      |            ||
  |      +------------+|  XX - floating child 1
  |                    |
  +--------------------+
and@doxdesk.com