none
Box Wrapper Cut short in non-IE browsers! RRS feed

  • Question

  • Hi All,

    This is weird but unsurprising.  I've created a test page at http://www.lfps.org.uk/Z_DIV_TESTER.html to illustrate the problem. 

    The page has an overall box wrapper shown with the yellow border, and them some elements that are not editable followed by a body contetnt DIV shown with the red border.  Inside this DIV are three other DIVS for left, middle and right content.

    View this page in IE and the box wrapper extends all the way to the bottom of the page as it should.  View it in FF, GC, safari and opera and the box wrapper is cut short before the body content starts.

    I can't fathom it out and and I'm sure this problem is related to the fact that other pages when filled with cntent using this layout fail to show the margins specified above and below the body content DIV

    Can anyone fathom this out?

    Thanks

    Thursday, February 17, 2011 4:35 PM

Answers

  • ALWAYS specify what version of IE you are talking about. IE8 looks the same as the other browsers you are talking about.  IE7 is not as standards compliant.

    (Elements being editable or not is not part of the issue.)

    Once floated, elements are taken out of the flow of the document.  Their containing elements no longer have any concept of how big the floated elements are.  If you want a container of floated elements to be at least as big as the floated elments are, have it also contain something further down in the document flow which clears those floats (pushes itself below them) and is not also floated itself.   The container - and its border - will reach down to include the unfloated element below the floats (and thus will include the floats).

    Your footer clears the floats above it, but you've floated it, too.  Remove that float.  Voila, your yellow border will include the whole page.

     

    • Proposed as answer by KathyW2 Thursday, February 17, 2011 5:51 PM
    • Marked as answer by eyetranced Saturday, February 19, 2011 5:06 PM
    Thursday, February 17, 2011 5:31 PM

All replies

  • ALWAYS specify what version of IE you are talking about. IE8 looks the same as the other browsers you are talking about.  IE7 is not as standards compliant.

    (Elements being editable or not is not part of the issue.)

    Once floated, elements are taken out of the flow of the document.  Their containing elements no longer have any concept of how big the floated elements are.  If you want a container of floated elements to be at least as big as the floated elments are, have it also contain something further down in the document flow which clears those floats (pushes itself below them) and is not also floated itself.   The container - and its border - will reach down to include the unfloated element below the floats (and thus will include the floats).

    Your footer clears the floats above it, but you've floated it, too.  Remove that float.  Voila, your yellow border will include the whole page.

     

    • Proposed as answer by KathyW2 Thursday, February 17, 2011 5:51 PM
    • Marked as answer by eyetranced Saturday, February 19, 2011 5:06 PM
    Thursday, February 17, 2011 5:31 PM
  • Thanks Kathy,

    I think I need to get my head squarely around how floats work.  Can anyone recommend some good tutorials on this subject?

    Thursday, February 17, 2011 5:40 PM
  • Thanks Kathy,

    I think I need to get my head squarely around how floats work.  Can anyone recommend some good tutorials on this subject?

    All you ever want to know about floats:

    http://css.maxdesign.com.au/floatutorial/

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Thursday, February 17, 2011 6:31 PM
  • "All you ever want to know about floats:
    http://css.maxdesign.com.au/floatutorial/

    Which, just for the record, is also linked to in the BEFORE POSTING thread under Learning Resources and Reference Sites. Along with LOTS of other good stuff.


    February 2--Groundhog Day--the day we celebrate the invention of sausage.
    Thursday, February 17, 2011 7:44 PM