Etiqueta HTML5 frente a Div para cambio de tamaño automático

Question

Espero una solución, pero en el peor de los casos, una explicación de por qué mi div no cambia el tamaño, y puede ser porque estoy usando una etiqueta de navegación.

Tengo el siguiente html. Cuando el contenido dentro de mi etiqueta 'sección' crece, también lo hace el div con la clase de contenido de la página. Sin embargo, cuando mis elementos de menú de navegación aumentan, el div no cambia de tamaño.

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

Aquí está mi 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; 
} 

El problema que tengo es que entonces el div tiene una imagen de fondo que debe cubrir el fondo de las dos áreas de navegación y de sección. Sin embargo, esto solo sucede si el área de mi sección es más grande (de arriba a abajo) que mi navegador, ya que el div se estirará para acomodar el tamaño de la sección. Sin embargo, si mi área de navegación es más grande, en realidad se expande fuera del div y allí para la imagen.

Answer 1

Al flotar un elemento, que lo saca del flujo, y no ampliará está elemento contenedor. Una solución para esto es agregar desbordamiento: oculto; al elemento que lo contiene

Uso del desbordamiento: oculto; es una forma de clearfix - una solución para hacer que el elemento contenedor se expanda para mostrar cualquier elemento flotante y contenido. En realidad, cualquier valor de desbordamiento funciona, pero desbordamiento: el auto provoca barras de desplazamiento en el Explorador en Mac (no estoy seguro si alguien todavía lo usa) y desbordamiento: el desplazamiento causa barras de desplazamiento que es el mismo problema. Para algunas versiones de IE, también debe incluir un valor de ancho para hacer que esto funcione. Hay otras soluciones claras, que generalmente implican la inserción de algún tipo de elemento después de que el elemento flotante elimine ese elemento flotante, lo que también hace que el elemento que lo contiene se expanda para contenerlo: un div sin altura pero claro aplicado, o utilizando: después pseudoelemento, pero generalmente uso desbordamiento ya que no agrega marcas de presentación.