Fix the double floating margin bug (float margin-left) in IE versions earlier than 6.0.

by ajin_20009 on 2009-07-20 10:10:22

A piece of correct code can sometimes yield an unexpected result. The illustration below shows a simple div (the beige box) containing a left-floated div (the green box). The floating element has a 100px left margin, which creates a 100px gap between the container box and its left edge.

Logically, we should be able to achieve this by applying the following CSS style to the green box:

CSS Code:

```css

.floatbox {

float: left;

width: 150px;

height: 150px;

margin-left: 100px;

}

```

However, in reality, when viewing it in Internet Explorer, the result is...