Float and Absolute Bug

Float and absolute bug - Test page

The following two test cases have the same CSS styling (you can check the code). The only difference is that in the the second test case the center element (.colMain) has enough content that its height gets bigger than the height of the left column (.colLeft).

The DOM tree of these test cases is:

.wrap

.colLeft
.colMain
- .content
- .colRight

You can find more details of the effect of float and absolute bug. The effects are varied (all browsers tested are under Windows):

Firefox 1.0.6, Opera 7.23, Opera 8.0 - OK

IE 5+ - In the first test case the width of the main column is calculated as if the left column wouldn't exist, and it (the main column) is shifted to the right (because of the margin-left applied), and because of the container's overflow: hidden; some part of the right column is choped (hidden)

IE 6 - same as in IE 5+, but it adds a new bug: it doesn't respect the container's overflow: hidden;, so if you would give the container a width of 100%, you would get a horizontal scrollbar.

Opera 6.04 - in the first test case the container has the height of the main column and chopes the other columns; in the second test case the left column is shifted to the right and overlaps the main column (wierd effect)

Netscape 7.02 - same as Opera 6.04, just that in the second test case the left column is simply hidden :)

The container has the following styling:

.wrap { width: 800px; overflow: hidden; }

Test case I

Left column

.colLeft {
  float: left;
  width: 200px;
}

Main column

.colMain {
  display: block;
  margin-left: 200px;
  position: relative;
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean adipiscing consectetuer magna. Etiam ligula tellus, viverra vel, scelerisque et, egestas nec, neque. Donec imperdiet aliquet nunc. In hac habitasse platea dictumst. Etiam non wisi. Integer ornare feugiat ante. Nullam non massa. Pellentesque luctus, orci eu hendrerit euismod, sapien ligula fringilla nunc, in euismod enim nulla ac nulla. Morbi hendrerit lacinia enim. Proin porttitor pede quis mauris. Vivamus elementum posuere risus. Sed placerat dolor et odio. Donec iaculis. Nulla augue diam, volutpat quis, condimentum vel, eleifend eu, justo. Quisque et purus quis dolor consectetuer adipiscing. Aliquam erat volutpat. Pellentesque nec ante.

Right column

.colRight {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 200px;
}

Test case II

Left column

.colLeft {
  float: left;
  width: 200px;
}

Main column

.colMain {
  display: block;
  margin-left: 200px;
  position: relative;
}

Right column

.colRight {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 200px;
}

Apparently, IE behaves as it does because of its hasLayout bug. If we "give layout" to the main column in the first test case IE gets it correctly. For more on this subject read On having layout. (Thanks to Bruno for pointing this out to me)

Test case III - fixed in IE

Left column

.colLeft {
  float: left;
  width: 200px;
}

Main column

.colMain {
  display: block;
  margin-left: 200px;
  position: relative;
}
* html .colMain {
	height: 1px;
}

Right column

.colRight {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 200px;
}