A fix for float-margin inconsistences across browsers

Last updated: 2005/12/02

Return to the main page

During the process of redesigning one of my sites I stumbled upon some inconsistences in the margin applied to the floated boxes that I used for the navigation menu. At first I thought that it was due another IE float bug (and that it's partly true), but some tests proved that all browsers have issues when applying the margin, being Konqueror 3.1 the only browser that shown a consistent behaviour.

For seeing the problem in action, you need a floated div with floated items inside, with an empty div below it for clearing the float. The floated div has zero margin-bottom and the empty div has no margin at all. Below the floated boxes there are two headings: the first one have a big top margin while the second heading has zero margin-top (this one set inline). Here you can see the code for this:

h4 { margin: 75px 0 25px; }

.page-nav {
  margin: 10px 0 0;
  padding: 8px;
  border: 1px solid DimGray;
  background: YellowGreen;
  float: left;
}

...

<div class="page-nav">Sections:
  <a href="#Description">Description</a>
  <a href="#Download">Download</a>
  <a href="#WhatsNew">What's new</a>
</div><div style="clear:both;"></div>

<h4>Sample heading with a lot of margin-top</h4>

IE and Opera (7 & 8) apply the margin of the element below the floated box from the bottom of the floated box while Mozilla/Firefox and Safari 1.2 apply it from the top. Also, IE and Opera add some space to the margin (generous boys...), depending the exact amount of the disposition of the elements. Konqueror offers the best results rendering the margin from the bottom of the floated box without adding any extra space.

Sample heading with a lot of margin-top

Sample heading with zero margin-top

As it's usual with this type of inconsistences, the fix comes when you are tinkering with another thing: if your put the floated box inside of a container that have border, all the browsers render the margin in the same way that Konqueror (which makes me suppose that this it the right behaviour).

So if we add a div with the border set to the same color of the background, our problem vanishes (see the page source for more details).

.fix-page-nav { border: 1px solid WhiteSmoke; }

...

<div class="fix-page-nav"><div class="page-nav">Sections:
  <a href="#Description">Description</a>
  <a href="#Download">Download</a>
  <a href="#WhatsNew">What's new</a>
</div><div style="clear:both;"></div></div>

<h4>Sample heading with a lot of margin-top</h4>

Sample heading with a lot of margin-top

Sample heading with zero margin-top

Of course, this workaround isn't perfect, since you need to add an extra markup (the same problem as the clearing div), but if you alredy have placed the floated box in a container and , you get the solution for free. Also, the border will be visible if you use any type of background image (IE doesn't support the transparent value for the border color).

Finally, if you are working with this kind of floated elements, you should read also about the IE double float-margin bug (the IE float model is a box full of surprises...)

Return to the main page

© 2004-2005
Web design tips & tricks