Re: Float and margin issues

Mike Irwin wrote:

On Windows, IE6, Opera 7.2, and Mozilla Firebird 0.7 all render this
slightly different. The layout I'm trying to achieve is the way its
rendered in IE6. Which browser gets this correct, and how might I achieve
the desired layout in all three browsers?

Well, according to CSS 2.1 (see
http://www.w3.org/TR/CSS21/visudet.h...eight-property, paragraph
10.6.3), floated elements should not be taken into account when
calculating the height of a block-level element.

This means that your div#Content has just the height of its textual
content, #FloatLeft and #FloatRight are out of the normal flow, that's
why they appear outside of the #Content in Firebird... and in CSS
2.1-compliant browsers. (Yes, IE6 is wrong again).

A solution you might want to use in your fixed-size example would be to
explicitly set the height property on the #Content, for example:
div#Content { height: 60px ; }

"Vincent" <vincent.@.fr> wrote

Well, according to CSS 2.1 (see
http://www.w3.org/TR/CSS21/visudet.h...eight-property, paragraph
10.6.3), floated elements should not be taken into account when
calculating the height of a block-level element.

This means that your div#Content has just the height of its textual
content, #FloatLeft and #FloatRight are out of the normal flow, that's
why they appear outside of the #Content in Firebird... and in CSS
2.1-compliant browsers. (Yes, IE6 is wrong again).

A solution you might want to use in your fixed-size example would be to
explicitly set the height property on the #Content, for example:
div#Content { height: 60px ; }

It's not really the height that matters to me, but the fact that the two
floated divs ignore the margin-top value in #Footer. According to my
understanding, and maybe I'm reading
http://www.w3.org/TR/CSS2/box.html#collapsing-margins wrong, but it says
that "Vertical margins between a floated box and any other box do not
collapse." Opera and IE both add the margin, but Firebird does not.

"Mike Irwin" <mike (AT) faroutfreakyshit (DOT) com> wrote

"Vincent" <vincent.@.fr> wrote in message
news:bmoe3m$rq2$1 (AT) news-reader2 (DOT) wanadoo.fr...
Well, according to CSS 2.1 (see
http://www.w3.org/TR/CSS21/visudet.h...eight-property, paragraph
10.6.3), floated elements should not be taken into account when
calculating the height of a block-level element.

This means that your div#Content has just the height of its textual
content, #FloatLeft and #FloatRight are out of the normal flow, that's
why they appear outside of the #Content in Firebird... and in CSS
2.1-compliant browsers. (Yes, IE6 is wrong again).

A solution you might want to use in your fixed-size example would be to
explicitly set the height property on the #Content, for example:
div#Content { height: 60px ; }

It's not really the height that matters to me, but the fact that the two
floated divs ignore the margin-top value in #Footer. According to my
understanding, and maybe I'm reading
http://www.w3.org/TR/CSS2/box.html#collapsing-margins wrong, but it says
that "Vertical margins between a floated box and any other box do not
collapse." Opera and IE both add the margin, but Firebird does not.

IE and Opera are interpreting the declarations wrongly.

Floated elements are taken out of the flow but relative to the containing
element, and the containing element only.

The flowed elements are the content div and the footer div. The distance
drawn between them should be 50px as declared by #Footer.

To suggest the IE6/Opera display, remove the margin-top rule on the floated
elements and put the floated elements in a div with margin-top:25px nested
in the content div.

Louise

"boclair" <boclair (AT) bigpond (DOT) net.au> wrote

IE and Opera are interpreting the declarations wrongly.

Floated elements are taken out of the flow but relative to the containing
element, and the containing element only.

The flowed elements are the content div and the footer div. The distance
drawn between them should be 50px as declared by #Footer.

To suggest the IE6/Opera display, remove the margin-top rule on the
floated
elements and put the floated elements in a div with margin-top:25px nested
in the content div.

OK, at least I know who's to blame now. I've wrapped the floating divs in
another div which sets the margins I want, and although the margins aren't
quite the same in any of the browsers I'm testing with, it'll work for now.

Thanks for the help.

"Mike Irwin" <mike (AT) faroutfreakyshit (DOT) com> wrote

"boclair" <boclair (AT) bigpond (DOT) net.au> wrote in message
news:bmova1$poh3d$1 (AT) ID-210679 (DOT) news.uni-berlin.de...
IE and Opera are interpreting the declarations wrongly.

Floated elements are taken out of the flow but relative to the
containing
element, and the containing element only.

The flowed elements are the content div and the footer div. The
distance
drawn between them should be 50px as declared by #Footer.

To suggest the IE6/Opera display, remove the margin-top rule on the
floated
elements and put the floated elements in a div with margin-top:25px
nested
in the content div.

OK, at least I know who's to blame now. I've wrapped the floating divs in
another div which sets the margins I want, and although the margins aren't
quite the same in any of the browsers I'm testing with, it'll work for
now.

Thanks for the help.

Hi Mike

If you put an empty div after the two floated divs, and nest it inside the
content div, then the content div will contain the two floated divs and the
top margin on the footer div will be OK

<div id="Wrapper">
<div id="Content">Content
<div id="FloatLeft">FloatLeft</div>
<div id="FloatRight">FloatRight</div>
<div style="clear: both;"></div>
</div>

HTH
David