Come evitare la sovrapposizione di contenuto flottante in due div?

Question

In una pagina di FAQ che sto cercando di fare Ho una pagina con questa struttura:

<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> 

Ecco il CSS:

#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; 
} 

mio contenuto della pagina si trova nella sezione container, e il piè di pagina è direttamente sotto. Lo faq_sidebar è molto più corto di faq_primary e poiché le colonne nel piè di pagina sono tutte a sinistra, terminano a destra di faq_primary, sotto la barra laterale di faq_sidebar.

Ecco uno screenshot:

Qualche consiglio così posso evitare che il contenuto del piè di pagina e contenitore dalla sovrapposizione?

Answer 1

si potrebbe aggiungere un div compensazione qui

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

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

</section> 

e poi lo stile in questo modo

.clear{ 
    clear:both; 
} 

Se questo non lo fa, potrebbe essere necessario aggiungere un commento dopo l'</section>

Answer 2

Se questo è in un contenitore:

<section id="container"> 

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

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

</section> 

e li vuoi disposti in linea perché non in stile # contenitore con display: in linea. Stai utilizzando il posizionamento assoluto per #faq_sidebar e questo potrebbe essere il motivo per cui il contenuto del piè di pagina si sovrappone allo

Answer 3

È difficile conoscerlo senza ottenere lo stesso contenuto di quando provo questo non posso produrre lo stesso dello screenshot. (A causa delle differenze nel contenuto).

Ma sono abbastanza sicuro che se si:

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

causerà il contenitore per includere i bambini galleggiavano nel suo calcolo per l'altezza.

Anche io suggerirei di cambiare il sidbar left: ...-right: 0 se si sta cercando di p [posiziona re sulla destra (in alternativa float: right potrebbe essere corretto al posto del posizionamento assoluto).

MODIFICA: - Ho notato che una delle domande correlate aveva la stessa risposta e potrei essere propenso a suggerire che si tratta di un duplicato. Domanda: Make outer div be automatically the same height as its floating content

Answer 4

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

Ci sono di proprietà utilizzati per regolare ed evitare di andare per l'immagine in regolare lato destro o sinistro di una precedente immagine div o.

Answer 5

Rimuovi left:760px; da #faq_sidebar.