Div non espandibile proporzionale al contenuto

Question

Sto convertendo un sacco di tabelle in div, il layout stesso è molto semplice e finora funziona benissimo sia in ie che in ffx. MA, quando il contenuto di un div non si adatta, allora cresce da esso e spinge tutto dopo di esso ... in altre opere, fa un casino Il layout è così,

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

A destra galleggia a destra, il titolo va in alto a destra e il contenuto è sotto di essa, a sinistra galleggia a sinistra e si estende per l'altezza di destra (originariamente era un riquadro di righe = 2). il problema si presenta con il wrapper che deve avere un'altezza fissa, perché il suo genitore non ne ha (quindi non posso usare%), e poiché il contenuto è dinamico non so in anticipo di quale altezza ho bisogno. Se mi sbarazzo dell'altezza, il div si espande, ma lo stile del div (colore bg, bordo ecc.) Scompare perché ora ha l'altezza 0.

Inoltre, sto lavorando a un codice preesistente che idealmente non voglio ingombrare troppo con gli hack javascript, ma se non ho scelta, lo farò. Quindi, cosa posso fare?

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

Innanzitutto, non utilizzare <div class="title">, utilizzare <h1>.

Detto questo direi che potresti provare a giocare con la proprietà height ... ma senza CSS è difficile dire cosa sta succedendo.

Un altro trucco è mettere uno sfondo sull'involucro per fingere che il div sinistro si sta espandendo fino in fondo. Galleggiante sinistro e destro sinistro e destro con larghezza fissa e sembra a posto.

EDIT:

Ok, dopo aver visto il CSS, direi che quello che vuoi fare è aggiungere un chiaro: entrambi alla fine del wrapper in quanto tale:

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

Quindi, " hack " che funzionerebbe per questo è impostare lo sfondo che normalmente sarebbe in Sinistra nel wrapper. In questo modo sembrerà che Left abbia uno stile quando in realtà è il wrapper che contiene lo styling.

A proposito, non andare su div.class, usa solo .class

Answer 2

Suppongo che dovresti contenere float con

div.wrapper { overflow:hidden; }

Ma sarebbe d'aiuto se in realtà hai incollato dei css.

Modifica: per replicare l'altezza del 100% con le colonne un modo semplice come menzionato prima è fare affidamento su colonne false, impostare un'immagine di sfondo su div.wrapper (background: url (repeat.gif) repeat-y;) e uccidere il 100% di altezza sulle colonne perché ciò non avrà alcun effetto.