Posted by Jonathan N. Little on 04/01/06 02:44

Richard wrote:
> 9 times out of 10 Mozzila is right. IE is letting me get away with something
> naughty but what could it possibly be?
>
>
> <div id="wrapper" style="border: solid 1px black; width: 750px; height:
> 300px;">
>
> <div id="left_out" style="border: solid 1px blue; width: 539px; height:
> 300px; float: left;">
>
> <div id="left_in" style="border: solid 1px blue; width: 268px; height:
> 300px; float: left;">
> a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k
> l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w
> x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i
> j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u
> v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g
> h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s
> t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z
> </div>
>
> <div id="right_in" style="border: solid 1px green; width: 268px; height:
> 300px; float: right;">
> a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k
> l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w
> x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i
> j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u
> v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g
> h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s
> t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z
> </div>
>
> </div>
>
> <div id="right_out" style="border: solid 1px red; width: 209px; height:
> 302px; float: right;">
> Far Right
> </div>
>
> </div>
>
>

'left_out' contains the two floated 'left_in' and 'right_in' DIVs, but
'left_out' is only 539 px wide so the two when added 268 + 268 = 536 but
you *must* add the 1px border on each totaling 540 px which cannot fit
within 539 px of 'left_out'. Both IE and Mozilla are correct not to put
floated 'left_in' and 'right_in' side by side BUT 'left_out', 'left_in'
and 'right_in' are all 300px tall and IE expands 'left_out' like a table
cell and Mozilla does not. IE is wrong in this case as well. Both
'left_in' and 'right_in' should break out of the bottom of 'left_out'.

http://www.w3.org/TR/CSS21/visuren.html#floats
Visual formatting model

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Back to original message]