CSS - relativa posicionado div padre no se extiende a la altura div infantil absoluta

Question

He estado buscando en Google esto toda la mañana y parece que no puede conseguir que funcione:

tengo un DIV padre con posicionamiento relativo y dos Configuración secundaria DIV de columna dentro de ella, ambas posicionadas Absoluta. Necesito la altura del DIV padre para estirar con el contenido de los DIV internos.

He intentado poner un tipo de bit .clearfix antes de las etiquetas de cierre para #content pero no estoy flotando nada. También intenté agregar un atributo float al #content div en vano. ¿Puede alguien señalarme la dirección correcta aquí? Claramente, me falta algo con la forma en que las pantallas anidadas se afectan entre sí.

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

No es necesario position: absolute para esta tarea.

#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

Los divisores de columna no afectarán a su div mientras tengan posiciones absolutas, ya que se eliminan del flujo de página normal.

En su lugar, intente flotarlos y luego tener un div con claro: ambos; después de ellos.

Answer 3

despejando funciona pero he tenido resultados extraños. luego encontré una publicación que lo hace mucho más fácil y perfecto en todos los navegadores.

Configure sus divisiones secundarias para que flote: izquierda/derecha. Luego ponga "overflow: hidden" en el padre. Como no ha especificado una altura, se ajustará perfectamente a los elementos secundarios. No he usado clearing por años ahora.

Answer 4

El lado oscuro de la fuerza es un camino hacia muchas habilidades que algunos consideran antinaturales.

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

Answer 5

acabo de estado luchando con esto por un tiempo y encontré una solución real CSS sólo es cambiar el posicionamiento de divs 'absolutos' a 'relativo'. Esto realmente funciona!

Probado en un Mac, utilizando Safari 5.1.5 y Chrome 21.0 ....

Esperamos que esto ayude a alguien más.