Netscape makes nested floats inline?

Ryan Stewart · Feb 27, 2004

IE 6.0 displays the following code as expected. Netscape Navigator 7.0
does not. Both get the same result up to a point. "Some other content"
is in a blue box to the left. Everything else is in a red box floated
against the blue box. "foo" clears everything above it and is at the
left border of the red box. The difference is in the three black
boxes. IE properly renders them as taking up about one third of the
red box's width apiece, each floated against the previous one. In
Netscape, however, each box's width is not even enough to contain the
letters within it. This behavior only seems to occur when nesting a
floated element within another floated element. Is this a known bug? A
feature? Is there a workaround?

Code:
<html>
<head><title>A Block</title></head>
<body>
<div style="float: left; width: 15%; border: 1px solid blue;">
<p>Some<br />other<br />content</p>
</div>
<div style="float: left; border: 1px solid red;">
<div style="width: 30%; float: left; border: 1px solid black;">
abcdef
</div>
<div style="width: 30%; float: left; border: 1px solid black;">
zyxwv
</div>
<div style="width: 30%; float: left; border: 1px solid black;">
qwerty
</div>
<p style="clear: left;">foo</p>
</div>
</body>
</html>

Neil Marshall · Feb 28, 2004

Ryan said:
IE 6.0 displays the following code as expected. Netscape Navigator 7.0
does not. Both get the same result up to a point. "Some other content"
is in a blue box to the left. Everything else is in a red box floated
against the blue box. "foo" clears everything above it and is at the
left border of the red box. The difference is in the three black
boxes. IE properly renders them as taking up about one third of the
red box's width apiece, each floated against the previous one. In
Netscape, however, each box's width is not even enough to contain the
letters within it. This behavior only seems to occur when nesting a
floated element within another floated element. Is this a known bug? A
feature? Is there a workaround?

I looked, but couldn't find anything listed in http://bugzilla.mozilla.org/
As for if it's a feature, you're going to have to read the specs for CSS
on http://www.w3c.org/

Ryan Stewart · Feb 28, 2004

Neil Marshall said:
I looked, but couldn't find anything listed in http://bugzilla.mozilla.org/
As for if it's a feature, you're going to have to read the specs for CSS
on http://www.w3c.org/

I've read them. According to my understanding, the way IE renders it is the
proper way. Further, if I read it right, floating any element automatically
makes it a block element. The odd thing is that Netscape seems to treat it
as an inline element ("it" being a floated element within a floated
element). The main symptom/problem is that I can't specify a width for these
inner floated elements.

Toby A Inkster · Feb 28, 2004

Ryan said:
The main symptom/problem is that I can't specify a width for these
inner floated elements.

That is the crux of the matter.

http://www.w3.org/TR/CSS2/visuren.html#floats
| A floated box must have an explicit width (assigned via the 'width'
| property, or its intrinsic width in the case of replaced elements)

By not assigning an explicit width, you are telling the browser to use
'width:auto;' instead. Here is another quote from the CSS2 specs:

http://www.w3.org/TR/CSS2/visudet.html#q8
| If 'left', 'right', 'width', 'margin-left', or 'margin-right' are
| specified as 'auto', their computed value is '0'.

So Mozilla (correctly) reduces the width of the floated elements to
nothing.

Ryan Stewart · Feb 28, 2004

Toby A Inkster said:
That is the crux of the matter.

http://www.w3.org/TR/CSS2/visuren.html#floats
| A floated box must have an explicit width (assigned via the 'width'
| property, or its intrinsic width in the case of replaced elements)

By not assigning an explicit width, you are telling the browser to use
'width:auto;' instead. Here is another quote from the CSS2 specs:

http://www.w3.org/TR/CSS2/visudet.html#q8
| If 'left', 'right', 'width', 'margin-left', or 'margin-right' are
| specified as 'auto', their computed value is '0'.

So Mozilla (correctly) reduces the width of the floated elements to
nothing.

Yes, but I *do* specify a width (see my original post), and it has no
effect, as if the element were an inline element. But according to section
9.5 of the spec, "Any floated box becomes a block box that is shifted to the
left or right ..." And the rest is about positioning.

Toby A Inkster · Feb 28, 2004

Ryan said:
Yes, but I *do* specify a width (see my original post)

From your original post:

<div style="float: left; border: 1px solid red;">

So this <div> has zero width. Thus the child <div>s which have 'width:30%'
are 30% of zero.

Ryan Stewart · Feb 28, 2004

Toby A Inkster said:
From your original post:

<div style="float: left; border: 1px solid red;">

So this <div> has zero width. Thus the child <div>s which have 'width:30%'
are 30% of zero.

Ahhh, I hadn't considered that. Thanks a bunch!

Having trouble centering contents of td ?	3	May 2, 2023
Help with Visual Lightbox: Scripts	2	May 3, 2023
Need help , Having problem with Drag n Drop ?	9	Dec 21, 2022
Need help , Having problem with Drag n Drop...	1	Dec 21, 2022
I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023
Help with my responsive home page	2	Dec 14, 2022
Aligned to the left	3	Apr 19, 2023
Why is the e.target not working here?	1	Dec 29, 2022

Netscape makes nested floats inline?

Ryan Stewart

Neil Marshall

Ryan Stewart

Toby A Inkster

Ryan Stewart

Toby A Inkster

Ryan Stewart

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads