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

Problem with clearing floats in Firefox

P: n/a
Hi group,

I have some problems with clearing floated divs. My usual method works fine in Konqueror, but not in Firefox. Here's an example:

<html><body>

<div id='left' style='float:left; border:1px solid red;'>Floated left</div>

<div id='right' style='float:right; border:1px solid blue;'>Floated right</div>

<div id='clear' style='clear:both; height:0px; overflow:hidden;'>&nbsp;</div>

<div id='other' style='margin-top:20px; border:1px solid green;'>This should be 20px beneath Left and Right</div>

</body></html>

I'm trying to get the clear-div to clear all floats, without actually being rendered. But Firefox apparently thinks a div with height==0 shouldn't have any influence at all on the document.

How can I solve this problem? How else can I do this?
Thanks,
Niels
Jul 21 '05 #1
Share this Question
Share on Google+
18 Replies


P: n/a
Els
Niels wrote:
I'm trying to get the clear-div to clear all floats,
without actually being rendered. But Firefox apparently
thinks a div with height==0 shouldn't have any influence at
all on the document.

How can I solve this problem? How else can I do this?


Why don't you give it 1px height?
If you set the margins to 0, I'm sure no one will notice the
existence of the div.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Jul 21 '05 #2

P: n/a
Els wrote:
Why don't you give it 1px height? True, that works. But why?
If you set the margins to 0, I'm sure no one will notice the
existence of the div.

I would. I suppose I could live with it, and I think I've done it before
somewhere else to solve the problem. But I feel it's a hack, and I don't
understand why Firefox apparently misbehaves like this.

Come to think of it, lately I've had several situations where Firefox was a
little too clever for it's own good.
Thanks though,
Niels

Jul 21 '05 #3

P: n/a
Els
Niels wrote:
Els wrote:
Why don't you give it 1px height?
True, that works. But why?


Because it's a height.
height:0; is not a height. I find it quite logical for a
browser to ignore the presence of anything without any volume.
(what colour do you see when a blue line has zero length?)

Not saying it's proper behaviour - I haven't checked the specs
on it. Doesn't matter though, even if it's proper behaviour,
the other browsers are acting differently anyway.
If you set the margins to 0, I'm sure no one will notice
the existence of the div.


I would. I suppose I could live with it, and I think I've
done it before somewhere else to solve the problem. But I
feel it's a hack, and I don't understand why Firefox
apparently misbehaves like this.


Another way is of course to set the clear:both; property to
the next element, without using a seperate div for it.
Come to think of it, lately I've had several situations
where Firefox was a little too clever for it's own good.


<g>
And it's getting cleverer with each version. Firefox 0.9 is
the first Gecko to center a page properly without needing
hacks to make it stay inside the window. Firefox 0.8 still
needed the hack.
(see http://locusmeus.com/html-css/pageslipping.html )
--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Jul 21 '05 #4

P: n/a
In article <jo********************@news000.worldonline.dk>,
th***************@thisisnotmyserver.dk says...
<div id='clear' style='clear:both; height:0px; overflow:hidden;'>&nbsp;</div>


Won't

<div style="clear:both;"></div>

Work?

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Jul 21 '05 #5

P: n/a
Lauri Raittila wrote:
Won't

<div style="clear:both;"></div>

Work?

No, that's even worse. That will put the "other"-div between the Left and
Right. I can't decide why it does that...
Niels

Jul 21 '05 #6

P: n/a
Els
Niels wrote:
Lauri Raittila wrote:
Won't

<div style="clear:both;"></div>

Work?

No, that's even worse. That will put the "other"-div
between the Left and Right. I can't decide why it does
that...


That doesn't make any sense, really.
If the third div has style="clear:both;", the 4th div can't go
up between the first and second, unless you give it
position:absolute;

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Jul 21 '05 #7

P: n/a
Els wrote:
Because it's a height.
height:0; is not a height. I find it quite logical for a
browser to ignore the presence of anything without any volume. Hmm... perhaps. On the other hand, a simple <br> doesn't have any volume as
such, but it still changes the document.
(what colour do you see when a blue line has zero length?) None, obviously. But the document still contains it, and even if I can't see
it, it might influence other elements.

I agree that it a tricky subject.
Not saying it's proper behaviour - I haven't checked the specs
on it. Doesn't matter though, even if it's proper behaviour,
the other browsers are acting differently anyway. And it's annoying.
Another way is of course to set the clear:both; property to
the next element, without using a seperate div for it.

I don't see how that would work.

However, this seems to work:

<br style='clear:both'>

I'll use that for now.

Come to think of it, lately I've had several situations
where Firefox was a little too clever for it's own good.


<g>
And it's getting cleverer with each version. Firefox 0.9 is
the first Gecko to center a page properly without needing
hacks to make it stay inside the window. Firefox 0.8 still
needed the hack.
(see http://locusmeus.com/html-css/pageslipping.html )


I haven't run into that one, fortunately.

I seems to me that Mozilla repeats the mistake of Explorer trying to
interpret the code, and thereby enabling bad coding. All in the name of
compatibility and market share. I just found out today that Firefox
apparently tries to guess mimetypes based on content, and ignores the
mimetype sent by the server. I'll have to investigate further before making
conclusions.

I'm quite annoyed about the whole quirks mode concept, but I suppose I'll
have to study it more before I can really start to hate it.
Thanks for the chat, my problem seems to be solved,
Niels

Jul 21 '05 #8

P: n/a
In article <v8********************@news000.worldonline.dk>,
th***************@thisisnotmyserver.dk says...
Lauri Raittila wrote:
Won't

<div style="clear:both;"></div>

Work?

No, that's even worse. That will put the "other"-div between the Left and
Right. I can't decide why it does that...


What browser? URL?

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Jul 21 '05 #9

P: n/a
Els wrote:
No, that's even worse. That will put the "other"-div
between the Left and Right. I can't decide why it does
that...


That doesn't make any sense, really.
If the third div has style="clear:both;", the 4th div can't go
up between the first and second, unless you give it
position:absolute;


That's what I thought. I does that, however, in Firefox. I sort of makes
sense, using your own idea of empty things not being rendered. Plus some
Firefox magic...
//Niels
Jul 21 '05 #10

P: n/a
Els
Niels wrote:
Another way is of course to set the clear:both; property
to the next element, without using a seperate div for it.
I don't see how that would work.


Leaving the 3rd div out, applying the clear:both; to the 4th
div, but indeed, you won't be able to give it a 20px margin-
top then I think.
However, this seems to work:

<br style='clear:both'>
That's the method I started to avoid when I noticed the
unavoidable distance between the divs before and after a <br>
:-)
(see http://locusmeus.com/html-css/pageslipping.html )


I haven't run into that one, fortunately.


As long as you don't try to center pages, you won't ;-)
I'm quite annoyed about the whole quirks mode concept, but
I suppose I'll have to study it more before I can really
start to hate it.
Even better: don't start to hate it; study it and live with
it. You'll feel better ;-)
Thanks for the chat, my problem seems to be solved,


I'm afraid the keyword here is 'seems', but without a url
that's impossible to tell.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Jul 21 '05 #11

P: n/a
Els
Niels wrote:
Els wrote:
No, that's even worse. That will put the "other"-div
between the Left and Right. I can't decide why it does
that...


That doesn't make any sense, really.
If the third div has style="clear:both;", the 4th div
can't go up between the first and second, unless you give
it position:absolute;


That's what I thought. I does that, however, in Firefox. I
sort of makes sense, using your own idea of empty things
not being rendered. Plus some Firefox magic...


I didn't say empty things wouldn't be rendered, I said elements
without volume.
But <div style="clear:both;"></div> does have volume. I use it
on all of my pages, and it works in all browsers too.
--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Jul 21 '05 #12

P: n/a
Els wrote:
I didn't say empty things wouldn't be rendered, I said elements
without volume. OK, fine. But a div without content could be said to have no volume.
But <div style="clear:both;"></div> does have volume. I use it
on all of my pages, and it works in all browsers too.

It doesn't work for me. Some sort of space-time malfunction I guess...

My <br style='clear:both'> solution works for me, so I'll use that.
//Niels

Jul 21 '05 #13

P: n/a
Els wrote:
Leaving the 3rd div out, applying the clear:both; to the 4th
div, but indeed, you won't be able to give it a 20px margin-
top then I think.

Exactly, that's the problem.

<br style='clear:both'>


That's the method I started to avoid when I noticed the
unavoidable distance between the divs before and after a <br>
:-)

No such problem here in Firefox and Konqueror. The only distance is the
top-margin, and it goes down all the way down to 0px!

I'm quite annoyed about the whole quirks mode concept, but
I suppose I'll have to study it more before I can really
start to hate it.

Even better: don't start to hate it; study it and live with
it. You'll feel better ;-)

I suppose that'd be the prudent thing to do. But then I'd have to find
something else to bitch and moan about... I know: Internet Explorer!

Thanks for the chat, my problem seems to be solved,


I'm afraid the keyword here is 'seems', but without a url
that's impossible to tell.

My example is 6 lines. If you're that curious you can paste them to your
local machine. I know y'all like urls for examples, but this was just a
simple question about how to get clear.
//Niels
Jul 21 '05 #14

P: n/a
Els
Niels wrote:
Els wrote:
Leaving the 3rd div out, applying the clear:both; to the
4th div, but indeed, you won't be able to give it a 20px
margin- top then I think.

Exactly, that's the problem.

<br style='clear:both'>


That's the method I started to avoid when I noticed the
unavoidable distance between the divs before and after a
<br>
:-)

No such problem here in Firefox and Konqueror. The only
distance is the top-margin, and it goes down all the way
down to 0px!

I'm quite annoyed about the whole quirks mode concept,
but I suppose I'll have to study it more before I can
really start to hate it.

Even better: don't start to hate it; study it and live
with it. You'll feel better ;-)

I suppose that'd be the prudent thing to do. But then I'd
have to find something else to bitch and moan about... I
know: Internet Explorer!

Thanks for the chat, my problem seems to be solved,


I'm afraid the keyword here is 'seems', but without a url
that's impossible to tell.


My example is 6 lines. If you're that curious you can paste
them to your local machine. I know y'all like urls for
examples, but this was just a simple question about how to
get clear.


Okay, if those 6 lines are all, I'll make a sample page for
you then.

Your initial code:
http://locusmeus.com/temp/niels.html

Seems to work in my Firefox though... (0.8 in WinXP)

Now, changing the 3rd div the way Lauri said:
http://locusmeus.com/temp/niels2.html

You're right, the 4th div does go up, ignoring the clearing
div.

Now why don't I have that problem on my own pages...
Okay, I have non floating divs above the clearing one.
The &nbsp; inside the clearing div does solve the problem
though, although at the same time it gives the div a height:
http://locusmeus.com/temp/niels3.html

Adding line-height:0; to it avoids that:
http://locusmeus.com/temp/niels4.html

The reason I prefer <div> over <br>, is that if it's used on
more pages and I want a different look on all of them, I can't
just write a different style for the <br>, while I can do that
for a <div>.

But as it seems you only want it on one page, and won't have
any other content between the floats and the 4th div,
<br style="clear:both"> does the trick too, yes :-)
But not in IE (6.0 - WinXP)though:
http://locusmeus.com/temp/niels5.html

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Thunder - Dirty Love
Jul 21 '05 #15

P: n/a
Els wrote:
Okay, if those 6 lines are all, I'll make a sample page for
you then. Great! You've also added the strict doctype, which also is what I usually
use.

Your initial code:
http://locusmeus.com/temp/niels.html

Seems to work in my Firefox though... (0.8 in WinXP) It's doesn't in my 1.0pre on Linux.

Now, changing the 3rd div the way Lauri said:
http://locusmeus.com/temp/niels2.html

You're right, the 4th div does go up, ignoring the clearing
div.

Now why don't I have that problem on my own pages...
Okay, I have non floating divs above the clearing one.
The &nbsp; inside the clearing div does solve the problem
though, although at the same time it gives the div a height:
http://locusmeus.com/temp/niels3.html

Adding line-height:0; to it avoids that:
http://locusmeus.com/temp/niels4.html Yes, that also works on my Firefox. I usually add that to the clearer, but I
had left it out in the example.

But not on Konqueror -- I think its minimum font size is to blame here, plus
the fact that there's always been problems with line height in Konqueror.

Adding a overflow:hidden should solve that, limiting the div to the exact
height of 0px, regardsles of its content. That, however, causes Firefox to
disregard the div completely.

So it seems to be either Firefor or Konqueror if I want the div solution.

The reason I prefer <div> over <br>, is that if it's used on
more pages and I want a different look on all of them, I can't
just write a different style for the <br>, while I can do that
for a <div>. That's a concern, true. Couldn't you write <br class='someclass'> ?

But as it seems you only want it on one page, and won't have
any other content between the floats and the 4th div,
<br style="clear:both"> does the trick too, yes :-) I'm writing a large intranet site. All html is generated by php, and <br> or
<div> is equally easy for me -- I just have to find the best.

But not in IE (6.0 - WinXP)though:
http://locusmeus.com/temp/niels5.html

Hmf! Oh well, I'll look into that later. IE is _not_ going to steal my time
on this one!

Thanks a lot for your comments!
Niels
Jul 21 '05 #16

P: n/a
Els
Niels wrote:
Els wrote:
Okay, if those 6 lines are all, I'll make a sample page
for you then.
Great! You've also added the strict doctype, which also is
what I usually use.


That's good. :-)
Your initial code:
http://locusmeus.com/temp/niels.html

Seems to work in my Firefox though... (0.8 in WinXP)


It's doesn't in my 1.0pre on Linux.


Okay, starting up my SuSE here...
Starting Konqueror...
Starting Firefox (last week's version, 1.0 preview)
Looking at niels.html...

Indeed, it doesn't.
So it seems to be either Firefor or Konqueror if I want the
div solution.
How's this one:
http://locusmeus.com/temp/niels6.html

Exactly 20px between floats and 4th div, in WinXP: IE and
Firefox, and on Linux in Konqueror and Firefox.
The reason I prefer <div> over <br>, is that if it's used
on more pages and I want a different look on all of them,
I can't just write a different style for the <br>, while I
can do that for a <div>.


That's a concern, true. Couldn't you write <br
class='someclass'> ?


Yep, you can.
But what are the styles that could be applied to a <br>?
But as it seems you only want it on one page, and won't
have any other content between the floats and the 4th div,
<br style="clear:both"> does the trick too, yes :-)


I'm writing a large intranet site. All html is generated by
php, and <br> or <div> is equally easy for me -- I just
have to find the best.


Okay.
But not in IE (6.0 - WinXP)though:
http://locusmeus.com/temp/niels5.html


Hmf! Oh well, I'll look into that later. IE is _not_ going
to steal my time on this one!


I hope your customer doesn't let his employees use IE on this
intranet site then ;-)
Thanks a lot for your comments!


No problem.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Living Colour - Cult Of Personality
Jul 21 '05 #17

P: n/a
Els wrote:
Okay, starting up my SuSE here...
Starting Konqueror...
Starting Firefox (last week's version, 1.0 preview)
Looking at niels.html...

Indeed, it doesn't. Good to see that I haven't lost yet completely!
How's this one:
http://locusmeus.com/temp/niels6.html

Exactly 20px between floats and 4th div, in WinXP: IE and
Firefox, and on Linux in Konqueror and Firefox.

Yep, that works! Thanks for testing it!

It's a bit clumsy to implement in my html-making class, since the element
that wants the 20px isn't really the one getting it.
But not in IE (6.0 - WinXP)though:
http://locusmeus.com/temp/niels5.html


Hmf! Oh well, I'll look into that later. IE is _not_ going
to steal my time on this one!


I hope your customer doesn't let his employees use IE on this
intranet site then ;-)

That's his problem ;-) Seriously, if the site works in IE, but doesn't look
pixel-perfect, I'm not worried. If people insist on using IE they must be
prepared to pay for it. This isn't 2001!
//Niels
Jul 21 '05 #18

P: n/a
Niels wrote:
Els wrote:

Okay, starting up my SuSE here...
Starting Konqueror...
Starting Firefox (last week's version, 1.0 preview)
Looking at niels.html...

Indeed, it doesn't.


Good to see that I haven't lost yet completely!

How's this one:
http://locusmeus.com/temp/niels6.html

Exactly 20px between floats and 4th div, in WinXP: IE and
Firefox, and on Linux in Konqueror and Firefox.


Yep, that works! Thanks for testing it!

It's a bit clumsy to implement in my html-making class, since the element
that wants the 20px isn't really the one getting it.

But not in IE (6.0 - WinXP)though:
http://locusmeus.com/temp/niels5.html

Hmf! Oh well, I'll look into that later. IE is _not_ going
to steal my time on this one!


I hope your customer doesn't let his employees use IE on this
intranet site then ;-)


That's his problem ;-) Seriously, if the site works in IE, but doesn't look
pixel-perfect, I'm not worried. If people insist on using IE they must be
prepared to pay for it. This isn't 2001!
//Niels


A "Spacer Div" with a Clear ... Ugggh. Consider the following two ways
by applying a margin-top to the div/other "content":

<div id="left" style="border:1px solid red; float:left; clear:left;">
Floated left</div>
<div id="right" style="border:1px solid blue; float:right; clear:right;">
Floated right</div>
<div id="other" style="border:1px solid green;">
<p style="margin-top:40px; border:1px solid orange;">
This should be 20px beneath Left and Right</p></div>
<div id="left" style="border:1px solid red; float:left;">Floated
left</div>
<div id="right" style="border:1px solid blue; float:right;">Floated
right</div>
<div id="other" style="border:1px solid green; clear:both;">
<p style="margin-top:20px; border:1px solid orange;">
This should be 20px beneath Left and Right</p></div>

--
Gus
Jul 21 '05 #19

This discussion thread is closed

Replies have been disabled for this discussion.