By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,724 Members | 1,655 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,724 IT Pros & Developers. It's quick & easy.

Float and margin issues

P: n/a
Here's the test page:

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Test</title>
<style type="text/css">
#Wrapper
{
width: 750px;
border: 10px solid black;
background-color: Purple;
}

#Content
{
margin: 15px 30px 0px 30px;
border: 5px solid Blue;
background-color: White;
border: 5px solid Blue;
width: 660px;
}

#FloatLeft
{
background-color: Yellow;
border: 5px solid Red;
margin-top: 25px;
float: left;
width: 320px;
}

#FloatRight
{
background-color: Yellow;
border: 5px solid Green;
margin-top: 25px;
float: right;
width: 320px;
}

#Footer
{
margin-top: 50px;
background-color: White;
border: 5px solid Blue;
width: 740px;
}
</style>

</head>
<body>
<div id="Wrapper">
<div id="Content">Content
<div id="FloatLeft">FloatLeft</div>
<div id="FloatRight">FloatRight</div>
</div>
<div id="Footer">Footer</div>
</div>
</body>
</html>

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?
Jul 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
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 ; }

Jul 20 '05 #2

P: n/a
"Vincent" <vincent.@.fr> wrote in message
news:bm**********@news-reader2.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.
Jul 20 '05 #3

P: n/a

"Mike Irwin" <mi**@faroutfreakyshit.com> wrote in message
news:Zo****************@bignews3.bellsouth.net...
"Vincent" <vincent.@.fr> wrote in message
news:bm**********@news-reader2.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

Jul 20 '05 #4

P: n/a
"boclair" <bo*****@bigpond.net.au> wrote in message
news:bm************@ID-210679.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.
Jul 20 '05 #5

P: n/a

"Mike Irwin" <mi**@faroutfreakyshit.com> wrote in message
news:qH*****************@bignews3.bellsouth.net...
"boclair" <bo*****@bigpond.net.au> wrote in message
news:bm************@ID-210679.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
Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.