Skip to page content or Skip to Accesskey List.


Main Page Content

Msie6 Bug With Floating Divs And Spacers

Rated 4.25 (Ratings: 9)

Want more?

  • More articles in Code
Picture of raphael

Raphaël Mazoyer

Member info

User since: 21 Nov 2001

Articles written: 5

Microsoft Internet Explorer 6 running on a Windows system has a very annoying display bug when rendering an HTML page that uses Cascading Style Sheets to define divs as floating and adding a spacer div at the bottom with the setting clear: both attribute. If you've been using Marc Newhouse's great Practical CSS column, this may have affected you already...

The problem

Consider the following style sheet:

.spacer {

clear: both;


.container {

border: 1px #999 dashed;


.item {

float: left;

background-color: #ccc;

padding: 5px;

margin: 5px;


.main {


.main2 {

background-color: #eee;


And the following HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">




<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

<link rel="stylesheet" href="style.css" type="text/css"/>



<div class="main">

<h1>Title of the page</h1>

<div class="container">

<div class="spacer"> </div>

<div class="item">One</div>

<div class="item">Two<br/>bis</div>

<div class="item">Three</div>

<div class="spacer"> </div>





... which validates as XHTML

and CSS.

View it in any CSS-compliant browser, you'll see the same results (see screenshot).

Now consider another HTML file, identical to the first one, with the exception that the first div is set to the class .main2. The only difference is that its background-color attribute is set. When I look at it with IE6/Win2k, I don't see "Title of the page", it just isn't visible. Space is reserved for it, but the words aren't there. If you don't have IE6/win, see this screenshot.

OK, we've seen the reason. Now let's see some weird behavior: scrolling. When you scroll down then back up your affected page, the display is properly redrawn! Try it for yourself on the second example, or see this screenshot. (Note: the actual files differ from the code above, as I've added some <br>s to allow you to scroll easily. It does not otherwise affect the demonstration.)

The solution

Brian G. Vallelunga has provided me with the fix: explicitly set the position attribute of paragraphs to relative. Practically, add the following rule to your style sheet:

h1, h2, h3, h4, h5, h6, p {

position: relative;


See it in action, the way it should be (note the different CSS file). It still validates as XHTML and CSS, but I'm not sure how respectful it is of the spirit of the thing: feel free to contribute comment if you have some insight in this matter!!

But yes, it's that simple :-)

Digital Communications Manager at ASICS Europe, I blog at Petit Bourgeois: commentary about web building. You can reach me at [at] Recent launches: ASICS UK and Onitsuka Tiger.

The access keys for this page are: ALT (Control on a Mac) plus: is an all-volunteer resource for web developers made up of a discussion list, a browser archive, and member-submitted articles. This article is the property of its author, please do not redistribute or use elsewhere without checking with the author.