Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Crazy problem. By removing CSS float the JS doesn't work.

    The title is wrong and I can't edit it: It should read: "By ADDING CSS float":

    This should return the height of the content:

    http://page-test.co.uk/float.html

    ...but it doesn't work. If I remove the float:left from the boxes then it works:

    http://page-test.co.uk/no-float.html (this works)

    The only difference in the two is that the boxes in the working one do not have float:left.

    Why? This is crazy. What can do I do about it?

    Thanks for looking at my examples.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    A parent element that contains only floated elements collapses such that its height is 0. The provided link discusses ways to clear floats.

    Adding overflow:auto to the parent element often works to fix this.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,412
    Thanks
    11
    Thanked 595 Times in 575 Posts
    if the tag around the float:left boxes is changed to float:left, its height comes back.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •