Simple floating 'broken' in IE 6 (but OK in Moz etc)

[mark l sanders]

I need the following:

a) Two distinct boxes down left column;
b) One distinct box down right column;
c) Right-hand box must precede left-hand boxes in source code;

All of this is within pre-existing divs corresponding to corporate template.

Solution: lefthand boxes inside div float: left. Right column given suitable margin.

This works great in Firefox/Opera etc, but in IE6 the right-hand column is stuck below the bottom of lower left-hand box.

URL: <No URLs, thanks. See TOS [webmasterworld.com]>

Can anyone see the problem, please?

[edited by: DrDoc at 2:35 pm (utc) on June 21, 2004]

[mark l sanders]

Fixed!
See <snip> for an explanation and fix.

Thanks

[edited by: DrDoc at 4:06 pm (utc) on June 21, 2004]

[DrDoc]

This is caused by the IE "Doubled float-margin bug" discussed at length here [positioniseverything.net], along with other annoying IE bugs. The fix is to simply add

display: inline

to the style sheet. This method is preferred over any other fix, since it is sure not to break in other versions of IE. The * html hack should be used with care.