Netscape makes nested floats inline?

Discussion in 'HTML' started by Ryan Stewart, Feb 27, 2004.

  1. Ryan Stewart

    Ryan Stewart Guest

    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>
     
    Ryan Stewart, Feb 27, 2004
    #1
    1. Advertising

  2. Ryan Stewart wrote:

    >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/
     
    Neil Marshall, Feb 28, 2004
    #2
    1. Advertising

  3. Ryan Stewart

    Ryan Stewart Guest

    "Neil Marshall" <> wrote in message
    news:TtV%b.39082$...
    > Ryan Stewart wrote:
    >
    > >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/


    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.
     
    Ryan Stewart, Feb 28, 2004
    #3
  4. Ryan Stewart wrote:

    > 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.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
     
    Toby A Inkster, Feb 28, 2004
    #4
  5. Ryan Stewart

    Ryan Stewart Guest

    "Toby A Inkster" <> wrote in message
    news:p...
    > Ryan Stewart wrote:
    >
    > > 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.
    >

    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.
     
    Ryan Stewart, Feb 28, 2004
    #5
  6. Ryan Stewart wrote:

    > 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.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
     
    Toby A Inkster, Feb 28, 2004
    #6
  7. Ryan Stewart

    Ryan Stewart Guest

    "Toby A Inkster" <> wrote in message
    news:p...
    > Ryan Stewart wrote:
    >
    > > 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.
    >

    Ahhh, I hadn't considered that. Thanks a bunch!
     
    Ryan Stewart, Feb 28, 2004
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Nadav Samet

    nested right floats for CSS gurus

    Nadav Samet, Dec 4, 2005, in forum: HTML
    Replies:
    0
    Views:
    332
    Nadav Samet
    Dec 4, 2005
  2. Nadav Samet

    nested right floats for CSS gurus

    Nadav Samet, Dec 4, 2005, in forum: HTML
    Replies:
    1
    Views:
    346
  3. Leif K-Brooks
    Replies:
    3
    Views:
    524
    Nik Coughlin
    Mar 12, 2006
  4. Kosio

    Floats to chars and chars to floats

    Kosio, Sep 16, 2005, in forum: C Programming
    Replies:
    44
    Views:
    1,300
    Tim Rentsch
    Sep 23, 2005
  5. Jimmy
    Replies:
    7
    Views:
    4,946
    Chaddy2222
    Nov 21, 2008
Loading...

Share This Page