Each left (blue) float has dimensions 40×40, and margin top and right 10px. The (green) containers are fluid and have padding-right 30px. There are multiple problems depending on the browser width.
1. In IE6-: If the browser width is such that the right margin of the last float touches the right content edge of the container, and the width is slightly narrowed then an unexpected horizontal scrollbar appears. The container (incorrectly) does not shrink (compare it with the following one, having the same properties, but a single not floated child.) This condition lasts for an extent equal to the right padding of the container, if the browser width is further narrowed then the last float drops down.
2. In IE6-: If the floats are on more than one row, and the last of a row touches the container as above, but the last float of the whole series does not touch, then the right padding of the container is not respected. Further narrowing the window this condition lasts until all that padding is exhausted and then the touching float drops down.
In IE7 there is always the second behaviour, i.e.: If any float (at the end of a row) touches the right content edge of the container and the window is narrowed then, instead of having the float dropping down, the right padding of the containers is shrinked. Only when all that padding is exhausted then the touching float drops down.
(Note: To avoid further problems the container has hasLayout and the floats display:inline)
To fix the problems: use two containers, the inner with no padding, only hasLayout.
If the container has no padding there are no problems.
... but inline on the floats is necessary in IE6-: in the following case there isn't and the container is expanded to maintain the double margin on the right of the last float, before it drops
The container is floated: there are problems similar (though not identical) to the previous ones.
The container is floated: again a double container fixes the problems.