Bitesize Bugs

Double 50% width float problem in Internet Explorer

Problem

Two floated 50% width elements in a container that has an odd width will clear each other in Internet Explorer. One of them will always clear and move under to the next level.

Reason

This issue is due to IE’s way to calculate sub-pixel dimensions. Internet Explorer will approximate to the next higher integer any half-pixel dimension.

If you are dealing with two floated elements 50% in width that are nested in a 1001px width container, IE will not work with two 500.5px elements but two 501px ones. This is the reason why the last element in the sequence will always clear the other one, because they will not both fit the container’s given dimension.

Example

CSS:

#container{
  width:1001px;
}
.floated{
  width: 50%;
  float: left;
}

HTML Markup:

<div id="container">
  <div class="floated">
  ...
  </div>
  <div class="floated">
  ... 
  </div>
</div>

Browsers affected

You will encounter this bug in IE6, IE7 and it is yet to be fixed in IE8.

Filed under: CSS, HTML, IE6, IE7, IE8

So what’s it about?

Bitesize Bugs is a collection of short articles that expose pesky bugs in front-end web technologies like JavaScript, CSS, HTML and browser behaviors gone bad.
Follow

Get every new post delivered to your Inbox.