If you have a container with floating elements and a clear at the bottom, Internet Explorer might include an extra gap between your elements and your clear if you assign a padding value to your container.

If you view the example to the left in Firefox or some other non-IE browser, it will look as intended, with no gap between the floats and the clear. However, in IE, the 20px padding of the container div creates a 20px gap between the floats and the clear for some reason.

Here’s the code used:

<div style="padding: 20px;">
Container: padding: 20px;
<div style="float:left; width: 50%; background: green; color: white;">
Float
</div><div style="float:right; width: 50%; background: blue; color: white;">
Float
</div>

The workaround for this bug is to create the padding using container’s padding attribute for the left and right side, and the floats’ margin attributes for the padding on the top and bottom. Doing this creates a desired look across all browsers.

Note: This workaround is assuming that the clear will be set to 1px, and that the outside container is simply a container and will not contain content.