CSS - relativa posizionato div genitore non si estende a figlio assoluta altezza div

Question

Sono stato googling questo tutta la mattina e non riesco a farlo funzionare:

ho un DIV genitore con posizionamento relativo e due colonna DIV setup bambino al suo interno, entrambi posizionati Assoluto. Ho bisogno dell'altezza del DIV del genitore per allungare con il contenuto dei DIV interni.

Ho provato a mettere un bit di tipo .clearfix prima dei tag di chiusura per #content ma non sto fluttuando nulla. Ho anche provato ad aggiungere un attributo float al div #content senza alcun risultato. Qualcuno può indicarmi la giusta direzione qui. Chiaramente mi manca qualcosa con il modo in cui i display annidati si influenzano a vicenda.

CSS:

#content { 
width: 780px; 
padding: 10px; 
position: relative; 
background: #8b847d; 
} 

#leftcol { 
width: 500px; 
position: absolute; 
} 

#rightcol { 
width: 270px; 
position: absolute; 
left: 500px; 
margin-left: 10px; 
text-align: center; 
} 

HTML:

<div id="content"> 

<div id="leftcol"> 
<p>Lorem Ipsum</p> 
</div><!-- /leftcol --> 

<div id="rightcol"> 
<img src="images/thumb1.jpg"> 
<img src="images/thumb2.jpg"> 
</div><!-- /rightcol --> 

<br style="clear:both;"> 

</div><!-- /content --> 

Answer 1

Non è necessario position: absolute per questo compito.

#content { 
    width: 780px; 
    padding: 10px; 
    position: relative; 
    background: #8b847d; 
} 

#leftcol { 
    width: 500px; 
    float: left; 
} 

#rightcol { 
    width: 270px; 
    position: relative; 
    margin-left: 510px; 
    text-align: center; 
} 

Answer 2

vostri div colonna non procurare la sua div contenente mentre hanno posizioni assolute come sono rimossi dal normale flusso pagina.

Invece, prova a farle fluttuare, poi hai un div chiaro: entrambi; dopo di loro.

Answer 3

clearing funziona ma Ive ha avuto risultati strani. poi ho trovato un post che lo rende molto più semplice e perfetto in tutti i browser.

Imposta le immersioni del tuo bambino in virgola mobile: sinistra/destra. Quindi metti "overflow: hidden" sul genitore. Perché non hai specificato un'altezza, si avvolgerà perfettamente con gli elementi figlio. Non ho usato la pulizia da anni ormai.

Answer 4

Il lato oscuro della forza è un percorso per molte abilità che alcuni considerano essere innaturale.

$(document).ready(function() 
{ 
    var objHeight = 0; 
    $.each($('#content').children(), function(){ 
      objHeight += $(this).height(); 
    }); 
    $('#content').height(objHeight); 
});​ 

Answer 5

ho appena stato in lotta con quello per un po 'e ho trovato una vera soluzione è CSS solo per cambiare il posizionamento di div 'assoluti' a 'relative'. Funziona davvero !!!

Testato su un Mac, utilizzando Safari 5.1.5 e Chrome 21,0 ....

Spero che questo vi aiuterà a qualcun altro.