treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Footer is not clearing floated left sidebar with clear??

  • Hi guys, my site is displaying perfectly in Firefox, Safari and IE, but in Chrome the footer isn't clearing the left sidebar.

    Also, section/division heights are not a sum of sub-sections/divisions?? I see in Firebug that the height of the 'left-sidebar' section is only 19px while 'filter-panel', which is within 'left-sidebar' has a height of 356px?

    I had originally set fixed heights for the content and left-sidebar (also having the footer not clearing the left-sidebar) but the display is exactly the same without them.

    Any ideas what would cause this?


    <section id="left-sidebar">
    <section id="google-map">
    <section id="filter-panel">
    ...
    </section>
    </section>
    </section>

    <section id="content">
    ...
    </section>
    ...
    <footer>
    ...
    </footer>



    section#left-sidebar {
    position: relative;
    width: 240px;
    float: left;
    }

    section section#google-map {
    // Nothing here yet.
    }

    section section#filter-panel {
    float: left;
    position: absolute;
    left: 5px;
    top: 165px;
    width: 225px;
    }

    section#content {
    margin: 10px 0;
    float: left;
    width: 710px;
    }

    footer {
    clear: both;
    height: 20px;
    font-size: 11px;
    border-bottom: 1px solid black;
    text-align: center;
    }



    Update: I think this was because of the 'relative' position given to 'left-sidebar'. Removing this, the section now contains the heights of the subsections.