CSS float:left; - Page 1

Je fais un site et je voudrais présenter un menu sur la gauche de la page, puis le contenu à droite.
Donc j'ai fait ceci :

div.menu
{
  float:left;
}

C'est très bien, mon menu est à gauche, et le contenu suivant se place à droite du menu.
Ensuite, j'aimerais afficher des infos dans des blocs de texte (avec une bordure).
J'ai donc rajouté ceci :

div.bordure
{
  border-style:dashed;
}

Avec une page de ce genre :

<div class="menu">
 <div>Entrée 1</div>
 <div>Entrée 2</div>
</div>

<div class="bordure">Un petit texte encadré d'une bordure...</div>

Mais là je rencontre un problème : la bordure empiète sur le menu (bien que le texte soit effectivement à droite du menu).
Vous avez une idée d'où ça vient ?

un bug ? float c'est du CSS 2.0, donc pas forcément bien supporté.
je te conseille d'utiliser firefox et d'installer l'extension web developper. Tu pourras ensuite surligner les éléments "block" et voir ce qui se passe.

il me semble (de ce que j'avais pu remarquer) que l'attribut float empeche juste le texte du cadre flottant de chevaucher le texte des autres cadres, mais les cadres eux-même peuvent se chevaucher

et donc ton menu flottant chevauche bien le cadre avec la bordure

mais je n'ai pas regardé la norme ou que que ce soit pour savoir si c'était bien ça le comportement des floats

si tu empecher ca, tu peux attribuer une largeur à ton menu et une marge de même valeur à l'autre cadre

En fait je n'ai testé qu'avec Konqueror. Peut-être que c'est ce browser qui pose pb...
J'ai uploadé une page équivalente ici : http://sasume.free.fr/bordel/test.html
Pouvez-vous me dire si avec votre browser la bordure empiète sur le texte à gauche ?

tu peux attribuer une largeur à ton menu et une marge de même valeur à l'autre cadre

J'ai toujours l'impression que c'est une mauvaise idée de forcer une largeur fixe, car les gens n'ont pas tous la même résolution d'écran. Non ?

Je viens de tester avec IE6 et le problème est toujours là :/

Oui chez moi (firefox) la bordure fait tout l'écran, donc le premier élément du menu est dedans.
Tu peux aussi utiliser une largeur « fixe » proportionnelle à la taille de la police de caractères : 1em = le corps de la police (ie 10 points si la plice utilisée est en 10 points, etc.) Ça a entre autres comme conséquence que si on fait par exemple sous firefox Ctrl-+ pour augmenter la taille des caractères, ça augmentera également la taille de la div

Ah bonne idée, merci

Nu
: il me semble (de ce que j'avais pu remarquer) que l'attribut float empeche juste le texte du cadre flottant de chevaucher le texte des autres cadres, mais les cadres eux-même peuvent se chevaucher

ah oui c'est effectivement ca, les cadres sont supperposés, mais pas le texte.

Sasume>Un tableau ne te ferait pas l'affaire ?

Non, je ne veux pas de tableau.
Je veux pouvoir proposer d'autres CSS où le menu ne sera pas forcément à gauche, mais en haut, en ligne, ou à droite, etc...

de toutes façons, j'avais lu qu'en CSS on devait toujours spécifier une largeur pour les cadres flottants

fixe une largeur au cadre de gauche et donne une marge au contenu de droite égale a la largeur du cadre de gauche (+ qques pixels, par exemple)