float avec des div

Bonjour.

En résumé, voici ce que je veux faire en xhtml:

Code:

---

1 2 3 4 5 6 7 8 9

<div class="corps"> <div class="menu"> <ul><li>Menu1</li>etc.</ul> </div> <div class="content"> <p>Contenu de la page</p> </div> </div>

---

Grâce à une feuille de style, je veux qu'à l'intérieur de ma div "corps", la div "menu" soit à gauche (elle prend environ 200px sur les 900px de "corps") et que le contenu occupe le reste de l'espace disponible.

J'ai donc écrit, pour "menu":

Code:

---

1 2 3 4 5

.menu { width: 200px; float: left; }

---

Et pas de float pour "content".

Or, si "content" présente un encombrement vertical moins important que les menus de la div "menu" (ex: je n'écris qu'une ligne dans "content" alors que j'ai une dizaine de menus), la div "menu" dépasse de la div "corps" qui la contient et vient perturber l'arrangement des éléments qui suivent. En fait, "corps" s'adapte à la hauteur de "content" mais pas à celle de "menu".

Ce que je voudrais, c'est une solution pour que "corps" s'adapte verticalement à la plus haute des deux div qu'elle contient.

Si ce n'est pas clair, dites-le moi.

Merci de votre lecture !

Salut,

Code:

---

1 2 3 4 5 6 7 8 9 10

<div class="corps"> <div class="menu"> <ul><li>Menu1</li>etc.</ul> </div> <div class="content"> <p>Contenu de la page</p> </div> <div style="float:none;clear:both"></div> </div>

---

Si tu n'aimes pas les styles "imbriqués" alors tu créé une classe

Code:

---

.clear {float:none;clear:both}

---

Et remplacer

Code:

---

<div style="float:none;clear:both"></div>

---

par

Code:

---

<div class="clear"></div>

---

Merci beaucoup, ça fonctionne.

J'aurais une question en revanche:
à quoi sert et que veut dire

Code:

---

clear: both;

---

?

Merci.

clear:both empêche un élément d'être adjacent à un autre élément flottant.

Dans ton cas, "<div class="clear"></div>" sera toujours envoyé sur une nouvelle ligne (facilitant le calcul de la taille verticale pour "corps" par le navigateur).

Ok, merci pour l'explication.

Toutefois, un nouveau problème que je n'avais pas prévu est survenu.

Lorsque l'encombrement vertical du contenu de "content" dépasse celui de "menu", la div "content" occupe toute la largeur de "corps". Bon, en fait elle occupe toujours toute cette largeur, sauf que tant qu'il y a "menu" en haut à gauche de "corps", le contenu de "content" reste dans les 700px de droite (900-200). Et pour tout ce qui est en-dessous du bas de "menu", "content" occupe tout.

J'ai essayé de donner une width à "content", mais c'est à droite que la taille est réduite (puisque la "content" est calée à gauche dans "corps").
J'ai essayé avec un float à droite pour "content", ça ne fonctionne pas non plus: elle s'affiche bien à droite, mais après "menu", et non plus à côté.

Ce que je voudrais, c'est une div "menu" qui, quelle que soit la hauteur de "corps", a la même hauteur que "corps". Malheureusement, et je ne comprends toujours pas pourquoi, en css le height:100% ne fonctionne pas... Mais je voudrais une solution qui permette de faire l'équivalent de ce 100% sur la hauteur de la div contenante.

Merci.

Citation:

---

Envoyé par kéraunos

"content" occupe toute la largeur de "corps".

---

C'est le comportement normal...
Quand nous ne définissons pas une largeur pour un élément, il occupe toute la bande horizontal (width = 100 %).

Citation:

---

Envoyé par kéraunos

en css le height:100% ne fonctionne pas

---

Il fonctionne si tu ajoutes dans ta feuille de style

Code:

---

body, html {height:100%}

---

Citation:

---

Envoyé par kéraunos

une div "menu" qui, quelle que soit la hauteur de "corps", a la même hauteur que "corps"

---

Dans ce cas, je t'invite à découvrir la technique des colonnes factices.

Bonsoir,

Citation:

---

Ce que je voudrais, c'est une div "menu" qui, quelle que soit la hauteur de "corps", a la même hauteur que "corps". Malheureusement, et je ne comprends toujours pas pourquoi, en css le height:100% ne fonctionne pas... Mais je voudrais une solution qui permette de faire l'équivalent de ce 100% sur la hauteur de la div contenante.

---

Si le problème est simplement que le contenu de content reste dans ses 700px à droite, le plus simple est de lui mettre un

Code:

---

margin-left:200px;

---

Sinon la div de fin pour faire le clear a t-elle vraiment un intérêt ? Un overflow:hidden; sur la div corps ne suffirait pas ?

Bonne continuation.

Merci pour vos réponses.

Eric2a, même si je rajoute

Code:

---

body, html {height: 100%}

---

eh bien le height:100% ne fonctionne pas pour la div "menu" contenue dans "corps".

Ça "fonctionne" si j'applique cette propriété aux enfants de body, jusqu'à corps, puis "menu", qui alors occupera une place équivalente à 100% de la hauteur de la page. Donc ma page entière aura une taille plus grande, même si elle ne contient que deux lignes dans "content". Bref, ça ne fonctionne pas comme je le souhaite.

Mais la technique des colonnes factices m'a donné une idée. Je vais utiliser sa technique d'image de fond pour les deux div enfants de "corps" mais en conservant mon float:left pour "menu" et rajoutant la marge à gauche de 700px (merci Apollinaire, c'était pourtant tout bête...).


Et oui, overflow:hidden sur la div "corps" fonctionne également.

Merci à vous deux. Je vais tester tout ça. Je reviens vers vous si je coince à nouveau.