Discussion :

[Le Mad]

Bonjour,

Pour la création de mon site, je souhaite aligner 3 blocs sur une ligne, j'arrive à en aligner 2 avec les "float" mais pas les 3.
Si j'en aligne 2 dans 1 div et que j'aligne cette div avec la troisiéme div, la division dans laquelle sont mises les 3 div ne s'aggrandit pas !

Quelqu'un peut-il m'aider pour ce problème ?

Je séche complet là

Merci et à bientôt.

[Kerod]

Voilà de quoi t'éclairer sur le positionnement : CSS : Notions de base

Si tu as un quelconque problème hésite pas à poser d'autres questions

[fallais]

left; rien et right;

[Kerod]

le rien sous entend quand même certaines choses

[Le Mad]

J'ai essayé plein de truc ... mais rien à faire, ça marche pas !
Donc le float left, "rien" et float right me donne :

Le div de gauche, pas de problème, le div du milieu passe dessous le iv de gauche! Mais la div de droite est à droite mais en dessous des 2 autres !


A +

[Kerod]

Tu prends un div tu lui attribues une taille fixe en largeur ou en % et tu le mets en float:left
Tu fais la même chose pour un autre div mais cette fois ci en float:right
Et enfin tu prends un autre div et tu ne mets rien excepté en margin-left et margin-right ou tout simplement left et right si tu mets en position: absolute.

Voilà en francais

[Le Mad]

Ce que j'ai fait !!!!
Mais la troisiéme division est sous la 2éme, à droite !
Sinon, il me reste le position absolute pour disposer ces 3 divs !


Comment faire aussi pour que la div qui contient ces 3 blocs les prenne en compte?

Merci.

[Kerod]

voilà un exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#conteneur {
position: relative;
width: 750px;
margin: 0 auto; 
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
margin-right: 150px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#droite {
position: absolute;
right:0;
width: 150px;
}

[Le Mad]

Ok, merci !

J'essaye ça demain !
J'avoue que je n'en suis pas à mon premier site et buter sur du xHTML me rend complétement fou !

A bientôt.

[Bisûnûrs]

Ou sinon t'as :

Code :

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

1
2
3
<div style="float:left;width:200px">drg</div>
<div style="float:left;width:200px">ersg</div>
<div style="float:left;width:200px">erqg</div>

[Kerod]

Mais ça garantie pas que ca prendra toute la largeur de la page ou du conteneur

[Bisûnûrs]

Mais ça garantie pas que ca prendra toute la largeur de la page ou du conteneur

Ce n'était qu'un exemple de valeur width, après on peut utiliser les pourcentages.

Si le conteneur fait 600px, c'est fixe et on sait que ça changera pas, on peut faire :

Code :

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

1
2
3
<div style="float:left;width:150px">drg</div>
<div style="float:left;width:300px">ersg</div>
<div style="float:left;width:150px">erqg</div>

ou

Code :

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

1
2
3
<div style="float:left;width:25%">drg</div>
<div style="float:left;width:50%">ersg</div>
<div style="float:left;width:25%">erqg</div>

Si le conteneur est en pourcentage, alors il faut obligatoirement utiliser les pourcentages dans les div contenus.

[Le Mad]

Ca y est, ça marche !!!!! Enfin presque !!!!!
Les 3 blocs sont alignés, grâce à la méthode de BisounoursJos !
Méthode qui prend le moins de ligne !!!
Par contre, que dois je faire pour que le bloc qui contient ces 3 blocs, s'aggrandise (qu'il les prenne en compte, en fait !)

Il n'y a pas une propriété CSS pour arrêter ou prendre en compte le flottant ?

IE les prend en compte mais pas FF !


Merci et à bientôt.

[espaladito]

Pour arrêter de les prendre en compte :

Code :

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

1
2
3
{
clear: both ;
}

[Le Mad]

Merci, mais ça ne marche pas !

Donc je résume, 3 div flottantes dans une div !
Je souhaite que cette dernière div s'aggrandisse ! A cause des bordures !

Sous IE pas de pb, mais sous FF oui !

A bientôt et merci.