Welcome to WebmasterWorld Guest from 54.162.12.134

Forum Moderators: not2easy

Message Too Old, No Replies

Floating divs in Mozilla 1.3

which interpretation of CSS is correct?

     
12:36 am on Mar 19, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I originally raised this in an HTML & Browsers thread concerning the release of Mozilla 1.3, but it more properly belongs here. See [webmasterworld.com...]

Mozilla 1.3 renders some of my pages differently to all other browsers. After I raised it in HTML & Browsers, I received emails from a Boris Zbarsky stating that Mozilla 1.3 is correct - which makes all other browsers incorrect!

He quoted as an example (which is near enough to my xhtml):


div style="position: relative" id="one">
<div style="float:left; height: 100px" id="left" />
<div style="float:right; height: 100px" id="right" />
</div>
<div style="position: relative" id="two" />

The _correct_ (per CSS) rendering of this is that the div with id="one" has a height of "0", the div with id="two" starts right where the one with id="one" ends, and the floats overlap it.

Mozilla prior to 1.0 would incorrectly make the div with id="one" 100px tall, based on its contents.

I maintained that the div id="one" encloses the two divs id="left" and id="right" and is supposed to expand to accomodate the height of the floated divs.

But he came back with:


If they were not floated, that would be true. But floated elements are taken out of flow and do not affect the heights of parents. See [w3.org...] which says:

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist.

Also see the second illustration in that section, which clearly shows that a float is not contained by its parent.

Is there a CSS guru here who can tell me which interpretation is correct?

[edited by: Nick_W at 1:59 pm (utc) on April 28, 2003]
[edit reason] no 'sticky' references please [/edit]

1:29 am on Mar 19, 2003 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hi Harry

I'm sorry Harry, but I think that your interpretation is not the correct one!

Your Mr Z has explained the problem very well..the floats are out of the flow so the container in your is empty..therefore it has no height, so if you position your next block div relative to it it will go right up under the floats...

You could add in <div style="clear: both"></div> (above and below the floated divs) to give the container div (id="one" in the example")some "actual" content..usually this done so that the container div can be formatted in some way..I presume it would work for positioning reasons too..

Suzy

11:00 am on Mar 19, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks SuzyUK,

I was beginning to come to that conclusion. :(

But at least the fix is quite easy.

Harry

6:57 pm on Mar 19, 2003 (gmt 0)

10+ Year Member



Suzy and Harry: your little conversation came at a very timely point for me.

Mozilla 1.3 was cuasing me great confusion over this very issue, but you guys let me pinpoint my problem.

Thanks alot ;)

4:08 pm on Mar 20, 2003 (gmt 0)

10+ Year Member



Incidentally...

You have to set width with values other than `auto` to `float:left¦right`. However, this is permitted by CSS2.1.

[w3.org...]

5:19 pm on Mar 20, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



SuzyUK

You could add in <div style="clear: both"></div> (above and below the floated divs) to give the container div (id="one" in the example")some "actual" content.

I assume you mean:

<div class="container">
<div style="clear: both"></div>
<div style="float:left"> blah, blah </div>
<div style="float:right"> blah, blah </div>
<div style="clear: both"></div>
</div>

I have tried this and it works fine in everything except IE4.7 where the browser freezes when it tries to render the area with <div style="clear: both"></div>.

Is this normal? Or am I doing something wrong :(

7:25 pm on Mar 20, 2003 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Yes Harry, that's what I meant

first I've heard of this I wonder if adding a &nbsp or a"." into the div would help, maybe it's choking on the empty div

CSS:
.clear{
clear: both; height: 0px;
font-size: 0px; line-height: 0px;
}

HTML
<div class="wrapper">
<div class="clear">&nbsp;</div>
<div class="floatl">left float</div>
<div class="floatr">right float</div>
<div class="clear">.</div>
</div>

I don't have IE4.7 to test on, can't keep up with all these browsers...

Anyone else know of a way?

Suzy

12:33 am on Mar 21, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I wonder if adding a &nbsp or a"." into the div would help, maybe it's choking on the empty div

I tried that but eventually came to the conclusion it was just that IE4 didn't like "clear:both". A google search confirmed it.

[codestyle.org...]

My solution is yet another browser-specific style-sheet. This one contains just the "clear-both" attributes for the relevant divs and gets linked to any browser with a major version of 5 or above.

It would be nice to get away from this sort of workarounds. :(

[edit] Thankfully "clear:both" isn't needed in IE4 because like all current IE browsers, container divs expand to contain the floated divs [/edit]

2:15 am on Mar 21, 2003 (gmt 0)

10+ Year Member



Yup. Same problem here. Wait for Level 3 [w3.org] for this to be fixed.

[edited by: Nick_W at 7:05 am (utc) on Mar. 21, 2003]
[edit reason] Tidied up link [/edit]

1:04 pm on Apr 26, 2003 (gmt 0)

10+ Year Member



Im having a similar issue.

<div id="main">

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

<div class="floats_left>img</div>
<div class="floats_right>

<div class="title">title</div>
<div class="article">article text</div>

</div>

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

</div>

The clear:both is not correcting the problem in mozilla.

The floated divs are still escaping the "main" div, which is my container.

Is it just that I am positioning the clear:both divs incorrectly?

I have tried them with and without content.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month