Altura de div con altura de su contenido

[salbatore]

Hola a todos,

¿Como puedo hacer que el div "ROJO" coja la altura suficiente para abarcar el div AZUL en su totalidad... es decir... como si el div AZUL no tuviese position:absolute... pero teniendola?, todo sin determinar ninguna altura.

Código PHP:

<div class="ROJO" style="position:relative; background:red; width:100%">
Este es el texto de la div "ROJO", el cual no mide mas en altura que el texto del div "AZUL".
<div class="AZUL" style="position:absolute;top:0; left:0;background:blue; width:50px;">
Este texto provoca que "AZUL" coja mucha altura
</div>
</div>
 

Es una duda que he tenido durante años... y nunca he podido solventar... y eso que creo ya tener algo de conocimiento de CSS... pero este asunto esta incomestible.

No busco apaños javascript, ni duplicaciones de contenido oculto, ni cambiar la propiedad : absolute.

¿SABEIS?

[jomaruro]

Hola:

Busca información sobre columnas equilibradas.

Saludos.

[BloodShadow]

Iniciado por salbatore

No busco apaños javascript, ni duplicaciones de contenido oculto

y entonces como quieres lograr ese milagro??? o.O no se puede hacer sin eso sin usar lo q no quieres usar... lo normal es engaños visuales. Pero si no quieres usarlo no podras de ninguna manera :O

[salbatore]

Hola de nuevo...

Muchas gracias jomaruro... buscando columnas equilibradas encontre conceptos interesantes para situar cosas en posiciones absolutas sin estarlo... nunca se me abria ocurrido usar de ese modo los margenes... y eso que con js suelo hacer pequeños movimientos con ellos... pero el darle uno para luego negarlo con otro y asi situar la caja donde quiera es un gusto.

BloodShadow se hace asi(un ejemplo sencillo):

Código HTML:

<div style='background:red'>
   Aqui texto.
   <div  style='margin-left:200px'>
       Aqui mucho mas texto.
      <div  style='margin-left:-200px'>
          Aqui un texto que parece tener posicion absoluta pero no, pero el container superior contiene su altura.
      <div>
   </div>
</div>
 

Puede parecer una tonteria... y yo algunas veces he usado algo parecido... pero no para aplicarlo de este modo... Y sino... fijate como tienen las tipicas columnas que parecen estar en posicion abolusta con otras flotando a sus lados que tiene un width porcentual... lo tipico... pues suelen usar position:absolute... con este metodo no es necesario.

Gracias.