and put your “floatbox” inside a container (such as DIV), you will actually see 200px of the left margin instead of the expected 100px. This problem is known as “IE margin-doubling bug”.

In this post I collected solutions you can use to avoid this problem. The solution I’d recommend is at the end.

The first solution is to apply some minimal height to the container:

This method is described in more details here , and even better here.

Another one is to apply position:relative, this is quite an old solution, described here (there are also other fixes for the problem there, too; link returned error at the time of writing, might be a temporal problem – if not, please remind me to remove it).

Another solution is to wrap the element in another one, and apply float to that another. Removing float from the element helps avoid the trouble. This fix found here. There are lots of examples there, too.

You can also set display:inline, as described in this solution. I would recommend using this one as the most clean and compatible. To apply it to our example at the beginning, we should write the following CSS code: