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

  2. Kevin Audleman

    Steve Pugh Guest

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

  3. Kevin Audleman

    dorayme Guest

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

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.