Div pas en expansion proportionnelle au contenu

Question

Je suis en train de convertir plusieurs tableaux en divs, la mise en page en elle-même est très simple et jusqu'à présent, elle fonctionne très bien, c-à-d. MAIS, lorsque le contenu d'une div ne correspond pas, il en sort et pousse tout vers le bas après ... dans d'autres travaux, fait un gâchis La mise en page est comme ça,

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

Droite flotte à droite, le titre va en haut à droite et le contenu est en dessous, à gauche flotte à gauche et s’étend sur la hauteur de droite (à l’origine il s’agissait d’un rangpan = 2). le problème vient du wrapper qui doit avoir une hauteur fixe, car son parent n'en a pas (je ne peux donc pas utiliser%), et comme le contenu est dynamique, je ne sais pas à l'avance de quelle hauteur il me faut. Si je me débarrasse de la hauteur, la div se développe, mais le style de la div (couleur, bordure, etc.) disparaît car il a maintenant la hauteur 0.

De plus, je travaille sur un code préexistant sur lequel, idéalement, je ne veux pas trop encombrer de hacks javascript, mais si je n’ai pas le choix, je le ferai. Alors, que puis-je faire?

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

Tout d'abord, n'utilisez pas <div class="title">, utilisez <h1>.

Cela étant dit, je dirais que vous pouvez essayer de jouer avec la propriété height ... mais sans CSS, il est difficile de dire ce qui se passe.

Une autre astuce consiste à placer un fond sur l’emballage pour faire croire que la div de gauche s’agrandit jusqu’en bas. Left et Right flottent à gauche et à droite avec une largeur fixe et cela a l'air bien.

EDIT:

Ok, après avoir vu le CSS, je dirais que ce que vous voulez faire est d’ajouter un clair: les deux à la fin du wrapper en tant que tel:

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

Ensuite, le " pirater & "; cela fonctionnerait car cela consiste à définir l’arrière-plan qui serait normalement à gauche dans le wrapper. Ainsi, il semblera que Left est stylé alors que c’est vraiment le wrapper qui contient le style.

Au fait, n'allez pas div.class, utilisez simplement .class

Answer 2

Je suppose que vous auriez besoin de contenir des flotteurs avec

div.wrapper { overflow:hidden; }

Mais cela aiderait si vous colliez réellement des CSS.

Éditer: pour répliquer 100% de la hauteur avec des colonnes, une méthode simple, comme mentionné précédemment, consiste à utiliser des colonnes fausses, à définir une image d'arrière-plan sur div.wrapper (background: url (repeat.gif) repeat-y;) et à supprimer le 100% de hauteur sur les colonnes car cela n'aura aucun effet.