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!!