Webmaster Forum / HTML, CSS, Scripts / CSS / December 2003

I started with this:

#section
{
  position: relative;
  width: 100%;
}

and

<div id="section">
  Section 1
</div>
<div id="section">
  Section 2
</div>
<div id="section">
  Section 3
</div>

This worked as expected. I got:

Section 1
Section 2
Section 3

To the CSS I added:

#column21
{
  position: absolute;
  width: 20%;
}

#column22
{
  position: absolute;
  margin-left: 20%;
  width: 30%;
}

#column23
{
  position: absolute;
  margin-left: 50%;
  width: 50%;
}

And changed the HTML to

<div id="section">
  Section 1
</div>
<div id="section">
  <div id="column21">
     Column21
  </div>
  <div id="column22">
     Column22
  </div>
  <div id="column23">
     Column23
  </div>
</div>
<div id="section">
  Section 3
</div>

The columns themselves worked great, but "Section 3" is now written
*over* the new 3-column section 2, right after Section 1.

I expected:
Section 1
Column21       Column22            Column23
Section3

I got:
Section 1
#########      Column22            Column23

where "#########" is "Column21" and "Section 3" written on top on one
another.

It appears that Section 1 renders normally, the new section 2 is placed
properly relative, the absolute columns are placed properly, but when
it comes time to place section 3, the new section to is somehow negated
from the flow, and section 3 is place right after section 1 as if the
new section 2 were never there.

This result is really counterintuitive to me. It does the same thing in
IE5 and Safari on Mac OS X and IE6 on WinXP, so I have to believe I'm
missing something in the CSS spec. Either that or I can chalk it up as
another expected result of standards designed by a committee. ;-)