html - style - CSS-div pariente colocado en posición relativa que no se extiende a la altura div total del niño

html style attribute

Question

He estado buscando en Google esta mañana y parece que no puedo hacer que funcione:

Tengo una DIV parental con posicionamiento relativo y una configuración DIV secundaria de dos columnas dentro de ella, ambas posicionadas como Absolutas. Necesito que la altura del DIV de los padres se estire con el contenido de los DIV internos.

He intentado poner un bit de tipo .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

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 2

He estado luchando con eso por un tiempo y he encontrado una solución real CSS-only es cambiar el posicionamiento de divs "absolutos" por "relativos". Esto realmente funciona!

Probado en una Mac, usando Safari 5.1.5 y Chrome 21.0 ....

Espero que esto ayude a alguien más.

Answer 3

Los divisores de columna no afectarán a su div que contiene mientras tengan posiciones absolutas a medida que se eliminen del flujo de página normal.

En cambio, intente flotarlos y luego tener un div con clear: both; después de ellos.

Answer 4

No necesitas 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 5

la limpieza 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 las divs de su hijo para que floten: 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.