Firefox bug with nested divs -- need help

Discussion in 'HTML' started by Kevin Audleman, Jun 6, 2008.

  1. Hey everyone,

    I'm trying to build a pretty simple div with two inner elements side
    by side, where the outer div will grow in height to contain the
    tallest of the two inner blocks. However Firefox is giving me a run
    for my money! I've posted the code, showing variations that work
    alongside the broken one. Can anybody tell me how to accomplish what
    I'm going for?

    http://trestlemanagement.hostasaurus.com/floattest.html

    Thanks,
    Kevin
     
    Kevin Audleman, Jun 6, 2008
    #1
    1. Advertising

  2. Kevin Audleman

    Steve Pugh Guest

    On Jun 6, 5:10 pm, Kevin Audleman <> wrote:
    > Hey everyone,
    >
    > I'm trying to build a pretty simple div with two inner elements side
    > by side, where the outer div will grow in height to contain the
    > tallest of the two inner blocks. However Firefox is giving me a run
    > for my money! I've posted the code, showing variations that work
    > alongside the broken one. Can anybody tell me how to accomplish what
    > I'm going for?
    >
    > http://trestlemanagement.hostasaurus.com/floattest.html


    Floats take the floated element out of the context of their parent
    elements. So your div with two floated children has no in-context
    content at all, hence it's height collapses. Add an element with
    clear: both after the two floated elements but inside the div. This
    will give the div some content, after the floats, and will hence
    extend the height to fit.

    Steve
     
    Steve Pugh, Jun 6, 2008
    #2
    1. Advertising

  3. Kevin Audleman

    dorayme Guest

    In article
    <>,
    Kevin Audleman <> wrote:

    > Hey everyone,
    >
    > I'm trying to build a pretty simple div with two inner elements side
    > by side, where the outer div will grow in height to contain the
    > tallest of the two inner blocks. However Firefox is giving me a run
    > for my money! I've posted the code, showing variations that work
    > alongside the broken one. Can anybody tell me how to accomplish what
    > I'm going for?
    >
    > http://trestlemanagement.hostasaurus.com/floattest.html


    You might get some help at

    <http://netweaver.com.au/floatHouse/>

    in particular, the business of parents not growing height for their
    floated children.

    --
    dorayme
     
    dorayme, Jun 6, 2008
    #3
  4. Hey everybody, thanks for the replies! I should have figured that once
    again Firefox got it right, whereas IE just did things its own way.

    Kevin
     
    Kevin Audleman, Jun 9, 2008
    #4
    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. Guadala Harry

    Nested DIVs - is there a better way?

    Guadala Harry, Oct 26, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    505
    Guadala Harry
    Oct 26, 2004
  2. dbunder

    XHTML and nested divs

    dbunder, Dec 20, 2003, in forum: HTML
    Replies:
    2
    Views:
    1,100
    John McGaw
    Dec 20, 2003
  3. rich
    Replies:
    0
    Views:
    756
  4. Replies:
    7
    Views:
    722
  5. maya
    Replies:
    4
    Views:
    266
Loading...

Share This Page