Each element within a wrapper division (brown dashed border) has a coloured outline and a height of 100px. Numbers indicate the order in which the code for the element appears in the source. The positioning scheme, if any, is indicated. Positioned squares are given some left margin simply to avoid complete overlap. The margin does not affect the behaviour. No element has an offset specified.

With standards compliant browsers each element appears in the expected normal flow position albeit removed from the flow when appropriate i.e. where the offset is not specified the in flow position is used instead.

Using MSIE7 this is not so. The top margin of Square 6 is ignored. Compare with case 4 which is identical other that the top margin on square 6. 

tThe same workaround as used for case 4 may be employed. See next page.

The same effect is present using MSIE6 but is not shown in this demonstration because MSIE6 treats square 5, which immediately precedes it, as relatively positioned and sets the margin form this. If this square is removed from the file the bug becomes clear.

---

Lipsum dolor sit amet, consectetuer adipiscing elit. Vivamus pulvinar, magna id mattis varius, turpis nibh imperdiet quam, vel condimentum velit sem id elit. Morbi sit amet ante. Curabitur sed ligula convallis mauris pulvinar vulputate. Donec dictum. Curabitur convallis turpis et velit. Pellentesque libero leo, ultrices porta, ullamcorper id, rutrum at, mi. Suspendisse lobortis, ipsum et rhoncus venenatis, est mi malesuada massa, vitae mollis turpis purus nec lacus. Nam vel erat in ipsum scelerisque imperdiet. Phasellus tempor. Duis enim risus, facilisis ut, semper eget, porta at, sem. Mauris tristique, orci sit amet scelerisque aliquet, nunc eros dictum wisi, non auctor arcu turpis id dui. Cras turpis erat, viverra quis, venenatis vitae, malesuada dignissim, nulla. Nam sed eros in mi malesuada semper. Proin mi diam, gravida sit amet, molestie sed, rhoncus ultricies, nisl. Mauris faucibus vehicula mauris.

Etiam sed mi vitae augue volutpat consectetuer. Cras orci purus, blandit et, semper condimentum, ornare in, lacus. Morbi enim. Nulla vitae felis non sem feugiat dignissim. Nullam pretium est non massa. Curabitur lacinia sollicitudin wisi. Duis malesuada venenatis sapien. Pellentesque quis felis. Aenean et nisl. Sed consectetuer, enim sed gravida volutpat, urna libero ullamcorper tortor, tincidunt viverra lorem nisl fermentum risus. Sed eu massa. Quisque ultricies. Vestibulum nisl libero, fermentum ut, posuere eget, commodo vitae, pede. Donec euismod vehicula leo. Duis a massa. Aenean vestibulum condimentum nibh. Donec leo lorem, elementum et, scelerisque pellentesque, tempus ut, libero. Nulla facilisi. Vivamus ante nibh, blandit eu, volutpat et, faucibus quis, libero.

Quisque ornare, orci id malesuada interdum, risus urna sodales neque, porttitor tincidunt massa neque vel pede. Vestibulum ipsum neque, semper eu, luctus id, faucibus aliquam, tellus. Nam id augue sed quam viverra tristique. Suspendisse est massa, ultricies eget, ullamcorper sit amet, iaculis pulvinar, tellus. Vestibulum dapibus porta libero. Morbi vel leo et nunc volutpat blandit. Donec vehicula sem eget turpis. Mauris diam turpis, sagittis nec, adipiscing a, fringilla et, nibh. Morbi commodo elit id mauris. Praesent consequat libero a est. Nulla facilisi. Suspendisse eleifend. Phasellus interdum lorem ac felis. In hac habitasse platea dictumst. Quisque ipsum.