Clearing/floating difference between Mozilla/Opera and Internet Explorer

The red numbers (background images) indicate the place in the source. Divs have a red border. Wrapper divs have a blue border (just to indicate where they are; not needed).

First (the same in all three)

float: left;

float: right;

clear: left;
float: left;

Second (IE places the third div on the upper right, which could be what you want)

float: left;

clear: left;
float: left;

float: right;

A fix for IE (putting the first div in an unfloated wrapper div)

float: left;

clear: left;
float: left;

float: right;

And 'a fix' for Mozilla/Opera (wrapping the first 2 divs in a left floating div)

float: left;

clear: left;
float: left;

float: right;

Third (IE places all divs in one row; 1+3...4+2)

float: left;

float: right;

clear: right;
float: left;

float: right;

A fix for IE (putting the second div in an unfloated wrapper div)

float: left;

float: right;

clear: right;
float: left;

float: right;

Funny stuff!

Home - More stuff