Mettre le bas de 3 div au même niveau

Résolu/Fermé
griko Messages postés 343 Date d'inscription samedi 31 janvier 2009 Statut Membre Dernière intervention 29 avril 2014 - 15 oct. 2009 à 21:09
PMax-57 Messages postés 193 Date d'inscription lundi 15 juin 2009 Statut Membre Dernière intervention 12 février 2017 - 25 oct. 2009 à 11:52
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 3671 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 1 011
15 oct. 2009 à 21:51
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 samedi 31 janvier 2009 Statut Membre Dernière intervention 29 avril 2014 10
16 oct. 2009 à 00:02
ça ne fonctionne pas !
0
griko Messages postés 343 Date d'inscription samedi 31 janvier 2009 Statut Membre Dernière intervention 29 avril 2014 10
16 oct. 2009 à 13:34
Personne d'autre n'a d'idées ?
0
griko Messages postés 343 Date d'inscription samedi 31 janvier 2009 Statut Membre Dernière intervention 29 avril 2014 10
16 oct. 2009 à 23:16
Up!
0
griko Messages postés 343 Date d'inscription samedi 31 janvier 2009 Statut Membre Dernière intervention 29 avril 2014 10
21 oct. 2009 à 14:21
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 193 Date d'inscription lundi 15 juin 2009 Statut Membre Dernière intervention 12 février 2017 40
21 oct. 2009 à 16:31
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 samedi 31 janvier 2009 Statut Membre Dernière intervention 29 avril 2014 10
22 oct. 2009 à 19:03
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 3671 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 1 011
22 oct. 2009 à 19:50
Bonjour,

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

Xavier
0
PMax-57 Messages postés 193 Date d'inscription lundi 15 juin 2009 Statut Membre Dernière intervention 12 février 2017 40
22 oct. 2009 à 20:11
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 samedi 31 janvier 2009 Statut Membre Dernière intervention 29 avril 2014 10
22 oct. 2009 à 21:12
ton code ne fonctionne pas !!
0
griko Messages postés 343 Date d'inscription samedi 31 janvier 2009 Statut Membre Dernière intervention 29 avril 2014 10
22 oct. 2009 à 22:14
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 193 Date d'inscription lundi 15 juin 2009 Statut Membre Dernière intervention 12 février 2017 40
22 oct. 2009 à 23:45
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 samedi 31 janvier 2009 Statut Membre Dernière intervention 29 avril 2014 10
25 oct. 2009 à 06:40
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 samedi 31 janvier 2009 Statut Membre Dernière intervention 29 avril 2014 10
25 oct. 2009 à 08:04
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 193 Date d'inscription lundi 15 juin 2009 Statut Membre Dernière intervention 12 février 2017 40
25 oct. 2009 à 11:52
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