[CSS] Problème de positionnement de DIV

Version imprimable

31/01/2006, 14h05
Oberown

[CSS] Problème de positionnement de DIV

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
http://progphp.free.fr/div.jpg

Et je voudrais ça.
http://progphp.free.fr/div2.jpg

Merci beaucoup
31/01/2006, 14h21
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
31/01/2006, 14h24
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.
31/01/2006, 14h30
Linaa

As-tu essayé en mettant un margin-bottom à 0px à ton bloc vert ?
31/01/2006, 14h52
franculo_caoulene
Je vois aussi :
Code:

1 2 3 4 #dernier { position: absolute; bottom: 0; }
31/01/2006, 14h54
Oberown
Citation:
Envoyé par franculo_caoulene

Je vois aussi :

Code:

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......
31/01/2006, 15h01
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
31/01/2006, 15h04
Oberown

Le marbin bottom ne marche pas non plus :cry:
31/01/2006, 15h07
franculo_caoulene

Tu n'aurais pas un lien où l'on pourrait tester en direct. C'est plus pratique.
31/01/2006, 15h19
_Mac_

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

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

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>

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

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.