HTML5 tag versus Div for Auto Resizing

Question

I'm hoping for a solution, but worst case scenario, an explanation of why my div isn't resizing, and it may be because I'm using a nav tag.

I have the following html. When the content within my 'section' tag grows, so does the div with the class of page-content. However, when my nav menu items increases, the div doesn't resize.

<div class="page-content">
    <nav>
      <ul>{menu items here}</ul>
    </nav>
    <section id="main">
        {bunch of text here}
    </section>
</div>

Here is my css.

.page-content 
{
    display: block;
    position:relative;
    width: 100%;
   margin-left: auto;
    margin-right: auto;
    background-image: url(images/bg-home-main.jpg);
    background-repeat: no-repeat;
    background-position: center;

}

    nav {
    display: block;
    float: left;
    padding: 15px;
    position: relative;
    margin: 0px 0px 0px -45px;
}

#main {
    padding: 5px 25px 5px 25px;
    margin-left: 175px;
}

The problem I have then is that the div has a background image that should cover the background of the both the nav and section areas. However, this only happens if my section area is larger (top to bottom) than my nav, as the div will stretch to accommodate the section size. However, if my nav area is bigger, it actually expands outside of the div and there for the image.

Answer 1

When you float an element, you take it out of the flow, and it won't expand it's containing element. One workaround to this is to add overflow: hidden; to the containing element.

Using overflow: hidden; is a form of clearfix - a fix to cause the containing element to expand to show any floated, contained elements. Actually any value of overflow works, but overflow: auto causes scrollbars in Explorer on Mac (not sure if anyone still actually uses that) and overflow: scroll causes scrollbars which is the same issue. For some versions of IE, you also need to include a width value to cause this to work. There are other clear fixes, usually involving inserting some kind of element after the floated element that clears that floated element, also causing the containing element to expand to contain it - a div with no height but clear applied to it, or using the :after pseudo element, but I usually use overflow as it doesn't add any presentational markup.