float avec des div

Invité · 18/06/2010, 21h24

Bonjour.

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**Eric2a** · 18/06/2010, 21h31

Salut,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

.clear {float:none;clear:both}

Et remplacer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Invité · 18/06/2010, 22h07

Merci beaucoup, ça fonctionne.

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

clear: both;

?

Merci.

**Eric2a** · 18/06/2010, 22h26

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

Invité · 18/06/2010, 23h19

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.