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

margins on cleared floats in Opera

P: n/a
Argh! I'm going nuts trying to get a constant margin after a floated
div that works cross browser.

This works in IE but not Firefox:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<div style="float:left; height:100px; background-color:red;">Hi,
I'm floating</div>
<div style="clear:both; margin-top:50px;">This text should have a
margin after the floated div</div>
</body>
</html>

This works in both IE and firefox, but not Opera

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<div style="float:left; height:100px; background-color:red;">Hi,
I'm floating</div>
<div style="clear:both;"></div>
<div style="margin-top:50px;">This text should have a margin after
the floated div</div>
</body>
</html>

It appears Opera only honours the clearing div for margins if it
contains something. However, if it contains something, then I get extra
whitespace which I can't seem to get rid of. ie:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<div style="float:left; height:100px; background-color:red;">Hi,
I'm floating</div>
<div style="clear:both; margin:0; border:0;
padding:0;">&nbsp;</div>
<div style="margin-top:50px;">This text should have a margin after
the floated div</div>
</body>
</html>

This appears to work fine, until you make the margin smaller - say 2
pixels:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<div style="float:left; height:100px; background-color:red;">Hi,
I'm floating</div>
<div style="clear:both; margin:0; border:0;
padding:0;">&nbsp;</div>
<div style="margin-top:2px;">This text should have a margin after
the floated div</div>
</body>
</html>

Where's the sodding whitespace coming from! Argh!

Many thanks for any help

Nov 5 '06 #1
Share this Question
Share on Google+
11 Replies


P: n/a

listerofsme...@hotmail.com wrote:
Argh! I'm going nuts trying to get a constant margin after a floated
div that works cross browser.

This works in IE but not Firefox:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<div style="float:left; height:100px; background-color:red;">Hi,
I'm floating</div>
<div style="clear:both; margin-top:50px;">This text should have a
margin after the floated div</div>
</body>
</html>

This works in both IE and firefox, but not Opera

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<div style="float:left; height:100px; background-color:red;">Hi,
I'm floating</div>
<div style="clear:both;"></div>
<div style="margin-top:50px;">This text should have a margin after
the floated div</div>
</body>
</html>

It appears Opera only honours the clearing div for margins if it
contains something. However, if it contains something, then I get extra
whitespace which I can't seem to get rid of. ie:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<div style="float:left; height:100px; background-color:red;">Hi,
I'm floating</div>
<div style="clear:both; margin:0; border:0;
padding:0;">&nbsp;</div>
<div style="margin-top:50px;">This text should have a margin after
the floated div</div>
</body>
</html>

This appears to work fine, until you make the margin smaller - say 2
pixels:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<div style="float:left; height:100px; background-color:red;">Hi,
I'm floating</div>
<div style="clear:both; margin:0; border:0;
padding:0;">&nbsp;</div>
<div style="margin-top:2px;">This text should have a margin after
the floated div</div>
</body>
</html>

Where's the sodding whitespace coming from! Argh!

Many thanks for any help
I should add that the bottom 2 examples have a non breaking whitespace
in the clearing div, but this has disappeared from my post (I guess it
got translated by my browser!)

Nov 5 '06 #2

P: n/a
li************@hotmail.com wrote:
>
I should add that the bottom 2 examples have a non breaking whitespace
in the clearing div, but this has disappeared from my post (I guess it
got translated by my browser!)
Which is one reason why you should always post a URL, not code.

--
Berg
Nov 5 '06 #3

P: n/a
VK
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title>KISS</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body>
<div style="float:left; height:100px; background-color:red;">Hi,
I'm floating</div>
<br style="clear:both">
<div style="margin-top:50px;">This text should have a margin after
the floated div</div>
</body>
</html>

See also <http://en.wikipedia.org/wiki/KISS_principle;-)

Nov 5 '06 #4

P: n/a

VK wrote:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title>KISS</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body>
<div style="float:left; height:100px; background-color:red;">Hi,
I'm floating</div>
<br style="clear:both">
<div style="margin-top:50px;">This text should have a margin after
the floated div</div>
</body>
</html>

See also <http://en.wikipedia.org/wiki/KISS_principle;-)
So what's the simple way then?

Nov 5 '06 #5

P: n/a

listerofsme...@hotmail.com wrote:
VK wrote:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title>KISS</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body>
<div style="float:left; height:100px; background-color:red;">Hi,
I'm floating</div>
<br style="clear:both">
<div style="margin-top:50px;">This text should have a margin after
the floated div</div>
</body>
</html>

See also <http://en.wikipedia.org/wiki/KISS_principle;-)

So what's the simple way then?
Sorry, just realised you weren't quoting my code (D'oh!).

However, your solution doesn't work in any of the browsers :-/

Nov 5 '06 #6

P: n/a
VK
However, your solution doesn't work in any of the browsers :-/

What browser's did you try? It tested for IE6 SP1, Firefox 1.5, Opera
9.02.

Otherwise pls redefine what does "work" imply in your case. In your
original post you stated "to get a constant margin after a floated div"
and this is exactly what happens.

Nov 5 '06 #7

P: n/a

VK wrote:
However, your solution doesn't work in any of the browsers :-/

What browser's did you try? It tested for IE6 SP1, Firefox 1.5, Opera
9.02.

Otherwise pls redefine what does "work" imply in your case. In your
original post you stated "to get a constant margin after a floated div"
and this is exactly what happens.
My apologies, I was missing a quote. I'm going markup blind. Many
apologies for that.

It does now work in Opera 9.02 and Firefox 1.5.0.7
It does not work in IE 6 SP2

Nov 5 '06 #8

P: n/a
VK
My apologies, I was missing a quote. I'm going markup blind.

I'm not sure about what are you saying. Are you talking about a
physical problem or about some working approach?
It does now work in Opera 9.02 and Firefox 1.5.0.7
It does not work in IE 6 SP2
There is nothing here that could do not work in IE: unless you have
removed DOCTYPE declaration and so dropped IE back into BackCompat
mode. Otherwise you have red floating div and below it another div. The
vertical space between the bottom border of the red div and the upper
border of another div is defined by margin-top rule plus default margin
of the red div (because the red div doesn't have any margins explicetly
set). That is for any UA unless it really badly broken - and IE 6 is
not the one, despite all its numerous defaults.

btw there is not IE 6 SP2 - only IE 6 SP1. You must be talking about IE
6 on Windows XP SP2.

Nov 5 '06 #9

P: n/a
VK wrote:
My apologies, I was missing a quote. I'm going markup blind.

I'm not sure about what are you saying. Are you talking about a
physical problem or about some working approach?
Heh. Nevermind. I just meant that I've been staring at markup all day
long and it's starting to all merge together (like "snow blind" ;-)
There is nothing here that could do not work in IE: unless you have
removed DOCTYPE declaration and so dropped IE back into BackCompat
mode.
Nope, my doctype is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

I even tried removing this before you posted to make sure you weren't
running in quirks mode. I fails both ways on mine. :-/
Otherwise you have red floating div and below it another div. The
vertical space between the bottom border of the red div and the upper
border of another div is defined by margin-top rule plus default margin
of the red div
Nope, on IE the top of the second div is near enough touching the
bottom of the red div.
btw there is not IE 6 SP2 - only IE 6 SP1. You must be talking about IE
6 on Windows XP SP2.
Well yes, although it does list SP2 as an update version.
Specifically:
Version 6.0.2900.2180.xpsp_sp2_gdr.050301-1519
Update Versions:; SP2;

Anyway thanks for your help. Like I said I've been staring at this for
hours now so it's more than likely that I'm doing something stupid.
Thanks anyway.

Nov 5 '06 #10

P: n/a
Anyway thanks for your help. Like I said I've been staring at this for
hours now so it's more than likely that I'm doing something stupid.
Thanks anyway.
OK, I obviously am doing something stupid, since I just cut and pasted
your entire code snippet and it works just fine as you say.

Here is my entire code that doesn't work in IE:

<!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" xml:lang="en" lang="en">
<head></head>
<body>
<div style="float:left; height:100px; background-color:red;">Hi,
I'm floating</div>
<br style="clear:both;"/>
<div style="margin-top:20px;">This text should have a margin after
the floated div</div>
</body>
</html>

Nov 5 '06 #11

P: n/a
Eik
On Sun, 05 Nov 2006 16:34:25 -0000, <li************@hotmail.comwrote:
Argh! I'm going nuts trying to get a constant margin after a floated
div that works cross browser.
Opera 7/8 allowed top margins on cleared boxes, just like IE, but in Opera
9 it changed to be like Mozilla and Safari, and only apply the bottom
margin of the float.

However there was a bug in Opera 7/8 that gaused a 1em gap to appear above
some cleared boxes (in addition to any margins that should separate the
float and the cleared box) and although this was fixed in Opera 9, a new
bug was introduced that causes the bottom margin of flowed boxes to be
ignored if there's a float nearby. If the flowed box extends below the
float this can cause problems.

I don't know if this has been fixed in Opera 9.1 but here's a test page
that should have a 2em gap above the green box:

http://www.geocities.com/prestocsin/clear.html

In Opera 7/8 it's 3em, in Opera 9.0 it's 1em but IE, Safari and Mozilla
get it right with 2em.

I would recommend you rely on the bottom margin of floats and previous
flowed elements to determine the gap between them and cleared elements,
and don't worry if only Opera gets it wrong. They should fix their bugs
faster. The top margin of the cleared box should be ignored by the float
but not any previous flowed box. (personally I prefer being able to add
top margin to cleared boxes like IE and old Opera because it's more
flexible, but it's more important that browsers render things the same)
Nov 5 '06 #12

This discussion thread is closed

Replies have been disabled for this discussion.