Problem with clearing floats in Firefox

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;'> </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

Niels wrote:
[color=blue]
> 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?[/color]

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 vão. O resto é imperfeito.
- Renato Russo -

Els wrote:
[color=blue]
> Why don't you give it 1px height?[/color]
True, that works. But why?
[color=blue]
> If you set the margins to 0, I'm sure no one will notice the
> existence of the div.[/color]
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

Niels wrote:
[color=blue]
> Els wrote:
>[color=green]
>> Why don't you give it 1px height?[/color]
>
> True, that works. But why?[/color]

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.
[color=blue][color=green]
>> If you set the margins to 0, I'm sure no one will notice
>> the existence of the div.[/color]
>
> 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.[/color]

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

<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 vão. O resto é imperfeito.
- Renato Russo -

In article <joubd.57822$Vf.2746761@news000.worldonline.dk>,
thisisnotmyadress@thisisnotmyserver.dk says...
[color=blue]
> <div id='clear' style='clear:both; height:0px; overflow:hidden;'> </div>[/color]

Won't

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

Work?

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

Lauri Raittila wrote:
[color=blue]
> Won't
>
> <div style="clear:both;"></div>
>
> Work?
>[/color]
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

Niels wrote:
[color=blue]
> Lauri Raittila wrote:
>[color=green]
>> Won't
>>
>> <div style="clear:both;"></div>
>>
>> Work?
>>[/color]
> No, that's even worse. That will put the "other"-div
> between the Left and Right. I can't decide why it does
> that...[/color]

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 vão. O resto é imperfeito.
- Renato Russo -

Els wrote:
[color=blue]
> 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.[/color]
Hmm... perhaps. On the other hand, a simple <br> doesn't have any volume as
such, but it still changes the document.
[color=blue]
> (what colour do you see when a blue line has zero length?)[/color]
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.
[color=blue]
> 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.[/color]
And it's annoying.
[color=blue]
> Another way is of course to set the clear:both; property to
> the next element, without using a seperate div for it.[/color]
I don't see how that would work.

However, this seems to work:

<br style='clear:both'>

I'll use that for now.

[color=blue][color=green]
>> Come to think of it, lately I've had several situations
>> where Firefox was a little too clever for it's own good.[/color]
>
> <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 )[/color]

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

In article <v8vbd.57834$Vf.2747035@news000.worldonline.dk>,
thisisnotmyadress@thisisnotmyserver.dk says...[color=blue]
> Lauri Raittila wrote:
>[color=green]
> > Won't
> >
> > <div style="clear:both;"></div>
> >
> > Work?
> >[/color]
> No, that's even worse. That will put the "other"-div between the Left and
> Right. I can't decide why it does that...[/color]

What browser? URL?

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

Els wrote:
[color=blue][color=green]
>> No, that's even worse. That will put the "other"-div
>> between the Left and Right. I can't decide why it does
>> that...[/color]
>
> 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;
>[/color]

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

Niels wrote:
[color=blue][color=green]
>> Another way is of course to set the clear:both; property
>> to the next element, without using a seperate div for it.[/color]
>
> I don't see how that would work.[/color]

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.
[color=blue]
> However, this seems to work:
>
> <br style='clear:both'>[/color]

That's the method I started to avoid when I noticed the
unavoidable distance between the divs before and after a <br>
:-)
[color=blue][color=green]
>> (see http://locusmeus.com/html-css/pageslipping.html )[/color]
>
> I haven't run into that one, fortunately.[/color]

As long as you don't try to center pages, you won't ;-)
[color=blue]
> 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.[/color]

Even better: don't start to hate it; study it and live with
it. You'll feel better ;-)
[color=blue]
> Thanks for the chat, my problem seems to be solved,[/color]

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

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Niels wrote:
[color=blue]
> Els wrote:
>[color=green][color=darkred]
>>> No, that's even worse. That will put the "other"-div
>>> between the Left and Right. I can't decide why it does
>>> that...[/color]
>>
>> 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;[/color]
>
> 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...[/color]

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 vão. O resto é imperfeito.
- Renato Russo -

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

Els wrote:
[color=blue]
> 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.[/color]
Exactly, that's the problem.

[color=blue][color=green]
>> <br style='clear:both'>[/color]
>
> That's the method I started to avoid when I noticed the
> unavoidable distance between the divs before and after a <br>
> :-)[/color]
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!

[color=blue][color=green]
>> 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.[/color]
> Even better: don't start to hate it; study it and live with
> it. You'll feel better ;-)[/color]
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!

[color=blue][color=green]
>> Thanks for the chat, my problem seems to be solved,[/color]
>
> I'm afraid the keyword here is 'seems', but without a url
> that's impossible to tell.[/color]
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

Niels wrote:
[color=blue]
> Els wrote:
>[color=green]
>> 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.[/color]
> Exactly, that's the problem.
>
>[color=green][color=darkred]
>>> <br style='clear:both'>[/color]
>>
>> That's the method I started to avoid when I noticed the
>> unavoidable distance between the divs before and after a
>> <br>
>> :-)[/color]
> 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!
>
>[color=green][color=darkred]
>>> 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.[/color]
>> Even better: don't start to hate it; study it and live
>> with it. You'll feel better ;-)[/color]
> 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!
>
>[color=green][color=darkred]
>>> Thanks for the chat, my problem seems to be solved,[/color]
>>
>> I'm afraid the keyword here is 'seems', but without a url
>> that's impossible to tell.[/color]
>
> 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.[/color]

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   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 vão. O resto é imperfeito.
- Renato Russo -
Now playing: Thunder - Dirty Love

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

[color=blue]
> Your initial code:
> http://locusmeus.com/temp/niels.html
>
> Seems to work in my Firefox though... (0.8 in WinXP)[/color]
It's doesn't in my 1.0pre on Linux.

[color=blue]
> 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   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[/color]
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.

[color=blue]
> 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>.[/color]
That's a concern, true. Couldn't you write <br class='someclass'> ?

[color=blue]
> 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 :-)[/color]
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.

[color=blue]
> But not in IE (6.0 - WinXP)though:
> http://locusmeus.com/temp/niels5.html[/color]
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

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

That's good. :-)
[color=blue][color=green]
>> Your initial code:
>> http://locusmeus.com/temp/niels.html
>>
>> Seems to work in my Firefox though... (0.8 in WinXP)[/color]
>
> It's doesn't in my 1.0pre on Linux.[/color]

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.
[color=blue]
> So it seems to be either Firefor or Konqueror if I want the
> div solution.[/color]

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.
[color=blue][color=green]
>> 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>.[/color]
>
> That's a concern, true. Couldn't you write <br
> class='someclass'> ?[/color]

Yep, you can.
But what are the styles that could be applied to a <br>?
[color=blue][color=green]
>> 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 :-)[/color]
>
> 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.[/color]

Okay.
[color=blue][color=green]
>> But not in IE (6.0 - WinXP)though:
>> http://locusmeus.com/temp/niels5.html[/color]
>
> Hmf! Oh well, I'll look into that later. IE is _not_ going
> to steal my time on this one![/color]

I hope your customer doesn't let his employees use IE on this
intranet site then ;-)
[color=blue]
> Thanks a lot for your comments![/color]

No problem.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Living Colour - Cult Of Personality

Els wrote:
[color=blue]
> 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.[/color]
Good to see that I haven't lost yet completely!
[color=blue]
> 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.[/color]
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.
[color=blue][color=green][color=darkred]
>>> But not in IE (6.0 - WinXP)though:
>>> http://locusmeus.com/temp/niels5.html[/color]
>>
>> Hmf! Oh well, I'll look into that later. IE is _not_ going
>> to steal my time on this one![/color]
>
> I hope your customer doesn't let his employees use IE on this
> intranet site then ;-)[/color]
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

Niels wrote:[color=blue]
> Els wrote:
>
>[color=green]
>>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.[/color]
>
> Good to see that I haven't lost yet completely!
>
>[color=green]
>>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.[/color]
>
> 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.
>
>[color=green][color=darkred]
>>>>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![/color]
>>
>>I hope your customer doesn't let his employees use IE on this
>>intranet site then ;-)[/color]
>
> 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[/color]

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

Problem with clearing floats in Firefox

re: Problem with clearing floats in Firefox

re: Problem with clearing floats in Firefox

re: Problem with clearing floats in Firefox

re: Problem with clearing floats in Firefox

re: Problem with clearing floats in Firefox

re: Problem with clearing floats in Firefox

re: Problem with clearing floats in Firefox

re: Problem with clearing floats in Firefox

re: Problem with clearing floats in Firefox

re: Problem with clearing floats in Firefox

re: Problem with clearing floats in Firefox

re: Problem with clearing floats in Firefox

re: Problem with clearing floats in Firefox

re: Problem with clearing floats in Firefox

re: Problem with clearing floats in Firefox

re: Problem with clearing floats in Firefox

re: Problem with clearing floats in Firefox

re: Problem with clearing floats in Firefox

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about