Bitesize Bugs

Double 50% width float problem in Internet Explorer


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.


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.



  width: 50%;
  float: left;

HTML Markup:

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

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

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: