Div no se expande proporcional al contenido

Question

Estoy convirtiendo un montón de tablas en divs, el diseño en sí es muy simple y hasta ahora funciona muy bien tanto en ie como en ffx. PERO, cuando el contenido de un div no encaja, entonces crece fuera de él, y empuja todo después de él hacia abajo ... en otras obras, hace un desastre El diseño es así,

<div class="wrapper">
    <div class="left">picture</div>
    <div class="right">
        <div class="title"> title</div>
        <div class="content">body</div>
    </div>
 </div>

La derecha flota a la derecha, el título se coloca arriba a la derecha y el contenido está debajo, la izquierda flota a la izquierda y abarca la altura de la derecha (originalmente era un espacio de filas = 2). El problema viene con el contenedor que necesita tener una altura fija, porque su padre no tiene ninguno (por lo que no puedo usar%), y dado que el contenido es dinámico, no sé de antemano qué altura necesito. Si me deshago de la altura, el div se expande, pero el estilo del div (color, borde, etc.) desaparece porque ahora tiene una altura 0.

Además, estoy trabajando en un código preexistente que idealmente no quiero saturar demasiado con los hacks de JavaScript, pero si no tengo otra opción, lo haré. Entonces, ¿qué puedo hacer?

div.wrapper{ height: 150px ; width: 100% ; } 

div.left{ height: 100% ; float: left ; width: 25% ; text-align: center ; } 

div.right{ float: right ; height: 100% ; } 

div.title{ width: 100% ; height: 50px ; } 

div.content{ width: 100% ; height: 100px ; text-align: center ; }

Answer 1

En primer lugar, no use <div class="title">, use <h1>.

Dicho esto, diría que podrías intentar jugar con la propiedad de altura ... pero sin CSS es difícil saber qué está pasando.

Otro truco es poner un fondo en el contenedor para simular que el div izquierdo se está expandiendo hasta el fondo. Izquierda y derecha flotan a izquierda y derecha con ancho fijo y se ve bien.

EDITAR:

Ok, después de ver el CSS, diría que lo que quieres hacer es agregar un claro: ambos al final del contenedor como tal:

<div class="wrapper">
    <div class="left">picture</div>
    <div class="right">
        <div class="title"> title</div>
        <div class="content">body</div>
    </div>
    <div style="clear both;"></div>
 </div>

Entonces, el " hackear " eso funcionaría para esto es establecer el fondo que normalmente estaría en Izquierda en el contenedor. De esta manera, se verá que Left tiene un estilo cuando realmente es el contenedor que contiene el estilo.

Por cierto, no vayas a div.class, solo usa .class

Answer 2

Supongo que necesitarías contener flotantes con

div.wrapper { overflow:hidden; }

Pero sería útil si realmente pegaras algunos CSS.

Editar: para replicar el 100% de la altura con columnas, una manera fácil como se mencionó anteriormente es confiar en columnas falsas, establezca una imagen de fondo en div.wrapper (background: url (repeat.gif) repeat-y;) y elimine el Altura del 100% en las columnas porque eso no tendrá ningún efecto.