¿Cómo evitar que el contenido flotante en dos divs se solape?

Question

En una página de preguntas frecuentes que estoy tratando de hacer que tengo una página con esta estructura:

<section id="container"> 

    <div id="faq_primary"></div> 
    <div id="faq_sidebar"></div> 

</section> 

<footer> 

    <div id="directory"> 

      <div id="col_a"></div> 
      <div id="col_b"></div> 
      <div id="col_c"></div> 

    </div> 

</footer> 

Aquí es el CSS relevante:

#container { 
    width:960px; 
    margin: 0px auto; 
    position:relative; 
} 

#faq_primary { 
    width:720px; 
    margin:20px 40px 0 0; 
    position:relative; 
    float:left; 
    display:inline; 
} 

#faq_sidebar { 
    left:760px; 
    position:absolute; 
} 

footer { 
    width:1111px; 
    height:250px; 
    margin:90px auto 0px; 
    position:relative; 
    background-image:url(../images/footer/bg.png); 
    color:#7d7d7d; 
} 

#directory { 
    width:960px; 
    margin:0px auto; 
    padding-top:25px; 
    font-size:13px; 
} 

#directory ul li{ 
    padding-bottom:4px; 
} 

#dir-cola, #dir-colb, #dir-colc, #dir-cold, #dir-cole { 
    width:174px; 
    height:140px; 
    float:left; 
} 

#dir-cola { 
    width:150px; 
} 

#dir-cole { 
    width:143px; 
} 

Mi contenido de la página se encuentra en la sección container, y el pie de página está directamente debajo. El faq_sidebar es mucho más corto que faq_primary, y como las columnas del pie de página flotan todas a la izquierda, terminan a la derecha del faq_primary, debajo de faq_sidebar.

Aquí hay una captura de pantalla:

Cualquier consejo por lo que puede evitar que el contenido en el pie y el contenedor se solapen?

Answer 1

Se podría añadir un div de compensación aquí

<div id="faq_sidebar"></div> 

<div class="clear"></div> 

</section> 

y luego diseñarlo como esto

.clear{ 
    clear:both; 
} 

Si eso no lo hace, es posible que tenga que añadir que después de la </section>

Answer 2

Si esto está en un contenedor:

<section id="container"> 

<div id="faq_primary"></div> 

<div id="faq_sidebar"></div> 

</section> 

y desea que se coloquen en línea por qué no estilo #container con pantalla: en línea. Está utilizando el posicionamiento absoluto para #faq_sidebar y esa podría ser la razón por la que el contenido del pie de página se superpone

Answer 3

Es difícil saberlo sin obtener el mismo contenido que cuando intento esto. No puedo producir lo mismo que la captura de pantalla. (Debido a diferencias en el contenido).

Pero estoy bastante seguro de que si:

#container 
{ 
    // ... *snip* 
    overflow: hidden; 
} 

hará que el contenedor para incluir a los niños flotaban en su cálculo de la altura.

También le sugiero que cambie el sidbar left: ... a right: 0 si usted está tratando de p [OSICIÓN que a la derecha (alternativamente float: right podría ser correcta en lugar de posicionamiento absoluto).

EDIT: Me di cuenta de que una de las preguntas relacionadas tenía la misma respuesta y me inclino a sugerir que se trata de un duplicado. Pregunta: Make outer div be automatically the same height as its floating content

Answer 4

clear:both; 
clear:left; 
clear:right; 

Hay la propiedad utilizada para regular y evitar ir a la imagen en ajustar lado derecho o izquierdo de una imagen div o anterior.

Answer 5

Eliminar left:760px; de #faq_sidebar.