[Résolu] Probleme de mise en page avec float

Bonjour,

J'ai un petit probleme de mise en page css, ma page est composée d'une colonne gauche pour les différents "blocks" du site et d'une page sur la droite

.RBlock {
width:150px ;
background-color:#000000 ;
color:#FFFFFF ;
padding:5px ;
}
#page {
width:80% ;
color:#000000 ;
background-color:#FFFFFF ;
float:right ;
}

Cela positionne bien comme je le veux les différents élement mais lorsque que la page devient plus grande (height) que l'ensemble des blocks cela déborde...

Est-il possible de régler ce probleme ? Merci.
Edited by Nad1 (22 Feb 2006 - 13:27)

Qu'entends tu par "Ca déborde" ?

Ton texte vient se placer sous le bloc de gauche ? Si c'est le cas, il faut que tu insères une marge à gauche de la largeur de ce bloc (plus une ptite marge) pour le bloc page Ainsi, les éléments du bloc page ne viendront pas se glisser sous ton bloc de gauche
Modifié par Artusamak (21 Feb 2006 - 17:53)

Et hop, le tutoriel qui va bien :

Éléments flottants qui dépassent de l'élément parent


Modifié par mpop (21 Feb 2006 - 19:26)

Je pense que quelques images seront bien plus explicites :

Quand la page est moins grande que l'ensemble des blocks pas de probleme :
http://boukeffa.free.fr/auto1.JPG

Quand la page est plus grande ca déborde... :
http://boukeffa.free.fr/auto2.JPG

Merci.
Edited by Nad1 (21 Feb 2006 - 19:00)

Ce n'est pas le bon bloc que tu as mis en float c'est pour ca, tu dois mettre float: left pour le bloc navigation

Artusamak a écrit :
Ce n'est pas le bon bloc que tu as mis en float c'est pour ca, tu dois mettre float: left pour le bloc navigation

Je ne pense pas. Pour une page avec peu de contenu, le bloc de navigation serait alors plus grand que la le bloc de contenu. Mais si on met le bloc de navigation en positionnement flottant, il n'est plus pris en compte dans le calcul de la hauteur du bloc parent. Donc il dépasse en bas.

Les réponses devraient se trouver dans le lien que j'ai donné dans mon message précédent (j'ai réparé le lien).

Ok merci ca marche j'ai rajouté :

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

Bonne journée.