Mettre le bas de 3 div au même niveau

Résolu
griko Messages postés 343 Date d'inscription   Statut Membre Dernière intervention   -  
PMax-57 Messages postés 195 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
je voudrais Mettre le bas de 3 div au même niveau et que quand l'une des div augmente, les deux autres augmentes aussi,

comment faire ?
A voir également:

12 réponses

Reivax962 Messages postés 3672 Date d'inscription   Statut Membre Dernière intervention   1 011
 
Bonjour,

Insère ces trois DIV dans une autre ; et pour tes trois DIV, place le style suivant : margin-bottom:0px;

Xavier
0
griko Messages postés 343 Date d'inscription   Statut Membre Dernière intervention   10
 
ça ne fonctionne pas !
0
griko Messages postés 343 Date d'inscription   Statut Membre Dernière intervention   10
 
Personne d'autre n'a d'idées ?
0
griko Messages postés 343 Date d'inscription   Statut Membre Dernière intervention   10
 
Up!
0
griko Messages postés 343 Date d'inscription   Statut Membre Dernière intervention   10
 
Personne ne sait comment aligner 3 div en bas ???
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
PMax-57 Messages postés 195 Date d'inscription   Statut Membre Dernière intervention   40
 
Salut,


Ne connaissant pas le code source en entier, je la joue devinette :

essaye style="disply:inline-block;"
0
griko Messages postés 343 Date d'inscription   Statut Membre Dernière intervention   10
 
Et bien pour le code, il y a simplement 3 div en position:relative; float:left et les 3 div on une hauteur automatique, et se que je voudrais c'est que ces trois div est leur bottom au même niveau.

Donc, le code donné je le met où ? sur les 3 div ou sur une div qui regroupe les deux ?
0
Reivax962 Messages postés 3672 Date d'inscription   Statut Membre Dernière intervention   1 011
 
Bonjour,

Me suis trompé, ce n'était pas margin-bottom:0px, mais plutôt bottom:0px...

Xavier
0
PMax-57 Messages postés 195 Date d'inscription   Statut Membre Dernière intervention   40
 
Salut,


Alors de là on reprendre l'idée des 3 divisions dans 1 :

<div id="contenu">
	<div id="div1"></div>
	<div id="div2"></div>
	<div id="div3"></div>
</div>


Si les divisions div1 div2 div3 ont des largeurs fixes, on imagine 200px pour chacunes, alors on peut utiliser le style :
#contenu : style="vertical-align:bottom; width:600px;"
#div1 : style="position:absolute; margin-left:0px; width:200px;"
#div2 : style="position:absolute; margin-left:200px; width:200px;"
#div3 : style="position:absolute; margin-left:400px; width:200px;"

si le vertical-align ne fonctionne pas, on peut prendre "bottom:0px;" pour les divs 1, 2 et 3. (+1 à reivax)


Normalement ça devrait marcher
0
griko Messages postés 343 Date d'inscription   Statut Membre Dernière intervention   10
 
ton code ne fonctionne pas !!
0
griko Messages postés 343 Date d'inscription   Statut Membre Dernière intervention   10
 
Bon c'est bon, j'ai trouvé autre chose :
#video_emission_tvc{
float:left;
overflow:hidden;
}

et pour les 3 div
margin-bottom:-1000px;
padding-bottom:1000px;


Merci quand même :)
0
PMax-57 Messages postés 195 Date d'inscription   Statut Membre Dernière intervention   40
 
Salut,

ta solution n'est pas dutout géniale (problèmes de compatibilité avec les différentes résolutions d'écran).

Là, j'ai trouvé un truc valide CSS...

1) Tu fais 1 div principale avec comme CSS :
- width:TALARGEUR
- height:TAHAUTEUR

2) Dans ta div principale, tu met 4 divisions
- div1 : width:0px; height:100px; display:inline-block; vertical-align:bottom;
- div2 : width:TALARGEUR; height:TAHAUTEUR; display:inline-block; vertical-align:bottom;
- div3 : width:TALARGEUR; height:TAHAUTEUR; display:inline-block; vertical-align:bottom;
- div4 : width:TALARGEUR; height:TAHAUTEUR; display:inline-block; vertical-align:bottom;

Dans ta div 1, tu ne met rien.
Dans les autres, tu met ton contenu.

Normalement ça fonctionne (vérifié sur FF et IE 8)


0
griko Messages postés 343 Date d'inscription   Statut Membre Dernière intervention   10
 
Oui mais la hauteur n'est pas définie, elle peut changer du coup ta solution ne fonctionnera pas ?!
0
griko Messages postés 343 Date d'inscription   Statut Membre Dernière intervention   10
 
actuellement, ce que j'ai fais (pas ton code) c'est pas compatible avec les versions antérieurs à IE8
0
PMax-57 Messages postés 195 Date d'inscription   Statut Membre Dernière intervention   40
 
Retire les height:TAHAUTEUR et ça fonctionnera quand même...

Dans mon code je les avait mises exprès pour avoir par exemple 70px pour 1 div, 200px pour une autre, etc...
0