Discussion :

[Oberown]

J'ai un DIV conteneur qui contient plusieurs DIV.

Je voudrais que mon dernier div soit positionné en bas du div.

Le div conteneur est le rouge, et le div vert est celui que je veut en bas.
Pour le moment j'ai ça


Et je voudrais ça.


Merci beaucoup

[ddeee]

salut,


triche en mettant un bloc invisible entre le jaune et le vert

ou peut-etre en mettant un margin-top à ton bloc vert

[Oberown]

Non car le conteneur (rouge) n'a jamais la même taille, donc le vert doit doit être quelque soit la taille du rouge en bas.

[Linaa]

As-tu essayé en mettant un margin-bottom à 0px à ton bloc vert ?

[franculo_caoulene]

Je vois aussi :

Code :

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

1
2
3
4
#dernier {
position: absolute;
bottom: 0;
}

[Oberown]

Je vois aussi :

Code :

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

1
2
3
4
#dernier {
position: absolute;
bottom: 0;
}

C'est ce que j'ai fait or il ne va pas en bas de mon div, mais en bas de ma page......

[franculo_caoulene]

Ah oui désolé, j'avais mal lu. C'est en bas du div que tu souhaites. Il faut donc laisser ton div dans le flux. Il faudrait peut-être jouer avec les marges comme l'a dit Linaa

[Oberown]

Le marbin bottom ne marche pas non plus

[franculo_caoulene]

Tu n'aurais pas un lien où l'on pourrait tester en direct. C'est plus pratique.

[_Mac_]

Y a des relations de proportions/dimensions connues dans ton truc ? Par exemple, taille de la boîte verte en %, etc.

[ddeee]

peut-etre ça ?... mais il y a le pb de la valeur en % à adapter selon la taille du bloc container

Code :

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

1
2
3
4
5
<div style="border: 1px solid red; height:400px">
<div style="border: 1px solid green; position:relative; top:95%">
aa
</div>
</div>

[_Mac_]

J'ai une solution, certes un peu foireuse, mais qui marche pour FF :

Code :

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

1
2
3
4
5
6
7
8
9
<div style="background: red; width: 200px; height: 200px;">
	<div style="height: 100%;">
		<div style="background: gray; width: 100px; height: 50px; margin-left: auto; margin-right: auto;"></div>
		<div style="background: yellow; width: 100px; height: 50px; margin-left: auto; margin-right: auto;"></div>
	</div>
	<div>
		<div style="background: green; width: 100px; height: 50px; margin-left: auto; margin-right: auto; position: relative; top: -50px"></div>
	</div>
</div>

Ca consiste à séparer le contenu de la boîte rouge en 2 : un premier bloc avec les blocs gris et jaune faisant 100% de haut (donc toute la hauteur du bloc rouge) et un second bloc avec la zone verte décalée vers le haut.