Problème de flottements

Mettre 3 Blocs côte à côte

Sujet résolu

26 décembre 2005 à 18:08:33

Bonjour tout le monde !

Voilà, j'aimerais mettre 3 blocs côte à côte :

- un menu à gauche
- le corps
- un autre menu à droite

#menu_gauche /* Bloc du menu de gauche */
{
width: 150px;
float: left;
}

#corps /* Bloc du corps de la page */
{
width: 500px;
}

#menu_droite /* Bloc du menu de droite */
{
width: 150px;
float: left;
margin-left: 650px;
}

Qu'est-ce qui cloche ?

Merci...

Isenduil

26 décembre 2005 à 18:20:45

Au hasard : le fait que le "menu_droite" ait une propriété "float : left" non ? :-°

scaler

26 décembre 2005 à 18:22:39

Salut

#menu_gauche /* Bloc du menu de gauche */
{
width: 150px;
float: left;
}

#corps /* Bloc du corps de la page */
{
width: 500px;
margin-left: auto;
margin-right: auto;
}

#menu_droite /* Bloc du menu de droite */
{
width: 150px;
float: right;
}

Margous

26 décembre 2005 à 18:23:52

La seule différence avec un float right le menu de droite est plus remonté mais il s'arrête toujours au niveau du dessous du corps mais sur le côté droit...

Il faudrait que ce soit à côté en fait...

Isenduil

26 décembre 2005 à 18:28:41

Je proposerais quelque chose du genre alors : (avec bien entendu des marges en pixels ou en pourcent selon ce à quoi tu veux aboutir...)

#menu_gauche /* Bloc du menu de gauche */
{
width: 150px;
float: left;
}

#corps /* Bloc du corps de la page */
{
width: 500px;
margin-left: 150px;
margin-right: auto;
}

#menu_droite /* Bloc du menu de droite */
{
width: 150px;
margin-left: 650px;
}

Margous

26 décembre 2005 à 18:33:37

ce que vous me proposer donne ça :

Image utilisateur

le corps et le menu de droite bouge horizontalement pour les différentes solutions que vous m'avez proposer...

scaler

26 décembre 2005 à 18:33:52

Il faut tendre vers une certaine fluidité... Et si on utilise bien les flottants, on aboutit à un système de pseudo-colonnes presque parfait.

++

PS : montre ton code xhtml.. Je rappelle que les flottants se placent toujours avant le bloc sur lequel ils flottent

Pandore

26 décembre 2005 à 18:42:52

hummm ... ton schémas me fait penser que ton conteneur global est plus petit que la somme de toutes les largeurs des blocs.

ça m'arrive aussi des fois, essaies de diminuer la largeur d'un des blocs (le corps par exemple) et la colonne de droite devrait remonter tout naturellement

Margous

26 décembre 2005 à 18:46:38

Le conteneur global fait 800px donc ça marche 150+500+150.
J'ai essayé tout de même et ça ne marche pas...
"ça ne veut pas passer même s'il y a la place"

Pandore

26 décembre 2005 à 19:03:15

Citation : Perso-Graph

Le conteneur global fait 800px donc ça marche 150+500+150.

Oui, ça c'est sans compter IE lol :lol:

Ce n'est pas bon de raisonner comme ça, surtout avec le modèle de boîte Microsoft.

Allez, un peu de lecture pour toi : Modèles de boites

Chiv

26 décembre 2005 à 19:51:04

Pour moi ce serait plutot !

#gauche
{
float:left;
width:150px;
}
#droite
{
float:right;
width:150px;
}
#corps /* rien pour le moment, aucune taille*/

En déterminant une taille pour les flottants, le corps devrait prendre le reste de la place. A toi de rajouter des margin si tu veux, par rapport à ton désign.
Puis un petit footer avec clear:both
Ca devrait marcher.

scaler

26 décembre 2005 à 20:16:32

hum... en fait oui, il n'est absolument pas indispensable de définir une largeur pour le corps. En revanche, les marges sont indispensables et doivent être d'une largeur supérieure ou égale au menu, sinon le corps va passer dessous et c'est rarement l'effet désiré

@++

Margous

26 décembre 2005 à 20:47:45

C'est bon ça marche, à la première modification j'avais pas mis dans l'ordre les "div" pour ça...

Merci beaucoup !