2 divs que crezcan juntos

[Ozone]

Hola a todos!,
tengo algo más o menos así:

Código HTML:

<div style="width: 100px">

   <div style="width: 50px; float: left; background: red;border-radius: 5px 5px 5px 5px;">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
   </div>

   <div style="width: 50px; float: right; background: green;border-radius: 5px 5px 5px 5px;">
      Lorem Ipsum is simply dummy text.
   </div>

</div> 

Yo necesito que los fondos de ambos div queden parejos independientemente de cantidad de texto que tenga cada uno. En est caso el div alineado a la derecha tendría menos altura que el que flota a la izquierda entonces sería más corto. Y acá vienen los problemas:

- No puedo usar un height estático porque el contenido de esos bloques es dinámico.
- Los bloques tienen bordes redondeados entonces no podría ponerle al div padre una imagen de fondo con repeat-y que simule ser el fondo de los div hijos porque estaría perdiendo el efecto.

Había pensado en hacer algo así:

Código HTML:

<div style="width: 100px;">
   <div id="apertura-box-derecha" style="border-top-right-radius: 5px; border-top-left-radius: 5px; background: red; width: 50px;padding: 10px 0;float: right;"></div>
   <div id="apertura-box-izquierda" style="border-top-right-radius: 5px; border-top-left-radius: 5px; background: green; width: 50px;padding: 10px 0;float: left;"></div>
   <div style="background-image: url('simulo-fondo-box-en-1-px.jpg')">

      <div style="width: 50px; float: left; background: red;border-radius: 5px 5px 5px 5px;">
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      </div>

      <div style="width: 50px; float: right; background: green;border-radius: 5px 5px 5px 5px;">
         Lorem Ipsum is simply dummy text.
      </div>

   </div>
   <div id="cierre-box-derecha" style="border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background: red; width: 50px;padding: 10px 0;float: right;"></div>
   <div id="cierre-box-izquierda" style="border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background: green; width: 50px;padding: 10px 0;float: left;"></div>
</div> 

¿Habría alguna alternativa un poco más práctica a esta forma? A mi no se me ocurre otra manera...

Perdón por todos los estilos inline y los ID sin sentido, pero lo quise hacer los más fácil de entener posible.


Graciass!!

[ryugen]

Si yo tuviera que hacerlo, lo haría asi: http://jsfiddle.net/xCaHR/

Ojo! Eso es solo IE8+.

Para IE7-6 , ajustaría el alto con javascript.

[kseso?]

Antiguamente para lograr esa igualdad jugábamos con el margen y padding inferior balanceados:
El mismo valor pero de signo contrario.
Claro que eso conllevaba dos condiciones:
.- padre con oberflow y
.- un corte (clear) para que el padre no hiciese cosas no queridas.

[Ozone]

Iniciado por ryugen

Si yo tuviera que hacerlo, lo haría asi: http://jsfiddle.net/xCaHR/

Ojo! Eso es solo IE8+.

Para IE7-6 , ajustaría el alto con javascript.

Claro, esa opción está prácticamente siendo una simulación de una tabla... mmmm... no me convence demasiado...

Iniciado por kseso?

Antiguamente para lograr esa igualdad jugábamos con el margen y padding inferior balanceados:
El mismo valor pero de signo contrario.
Claro que eso conllevaba dos condiciones:
.- padre con oberflow y
.- un corte (clear) para que el padre no hiciese cosas no queridas.

Mmmm... no conocía esa opción... ¿tendrás un link donde se explique un poco? porque no entendí mucho el funcionamiento...


Gracias ryugen y kseso?!

[kseso?]

Código CSS:

#contenedor {
   overflow: hidden;
}
.izquierda, .derecha {
   margin-bottom: -1000px;
   padding-bottom: 1000px;
}
 

Código HTML:

<div id="contenedor">
   <div class="izquierda"> </div>
   <div class="derecha">   </div>
</div>