homepage Welcome to WebmasterWorld Guest from 54.211.100.183
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Floating divs in Mozilla 1.3
which interpretation of CSS is correct?
HarryM

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 769 posted 12:36 am on Mar 19, 2003 (gmt 0)

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]

 

SuzyUK

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



 
Msg#: 769 posted 1:29 am on Mar 19, 2003 (gmt 0)

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

HarryM

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 769 posted 11:00 am on Mar 19, 2003 (gmt 0)

Thanks SuzyUK,

I was beginning to come to that conclusion. :(

But at least the fix is quite easy.

Harry

SethCall

10+ Year Member



 
Msg#: 769 posted 6:57 pm on Mar 19, 2003 (gmt 0)

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 ;)

securecat

10+ Year Member



 
Msg#: 769 posted 4:08 pm on Mar 20, 2003 (gmt 0)

Incidentally...

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

[w3.org...]

HarryM

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 769 posted 5:19 pm on Mar 20, 2003 (gmt 0)

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 :(

SuzyUK

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



 
Msg#: 769 posted 7:25 pm on Mar 20, 2003 (gmt 0)

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

HarryM

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 769 posted 12:33 am on Mar 21, 2003 (gmt 0)

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]

calimehtar

10+ Year Member



 
Msg#: 769 posted 2:15 am on Mar 21, 2003 (gmt 0)

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]

pixelkitty

10+ Year Member



 
Msg#: 769 posted 1:04 pm on Apr 26, 2003 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved