css : position

**le Jeu Mai 21, 2009 15:23**

Bonjour,

quelqu'un pourrait-il m'aider à trouver un piste de solution à mon problème, ma page se présente comme ci:

Code: Tout sélectionner: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr"> <head> <title>cool</title> <style type="text/css"> .bloc1{background:yellow;width:500px;height:auto;display:block;border:1px black solid;} .bloc2{background:red;width:300px;height:auto;display:block;;float:left;} .bloc3{background:green;width:200px;height:auto;display:block;;float:left;} .bloc4{background:blue;height:auto;width:200px;} .bloc5{background:#FFC663;height:auto;width:200px;} </style> </head> <body> <div class="bloc1"> <div class="bloc2"> bloc2 dynamique en hauteur<br/>bloc2 dynamique en hauteur<br/> bloc2 dynamique en hauteur<br/>bloc2 dynamique en hauteur<br/> bloc2 dynamique en hauteur<br/>bloc2 dynamique en hauteur<br/> bloc2 dynamique en hauteur<br/>bloc2 dynamique en hauteur<br/> bloc2 dynamique en hauteur<br/>bloc2 dynamique en hauteur<br/> bloc2 dynamique en hauteur<br/>bloc2 dynamique en hauteur<br/> </div> <div class="bloc3"> <div class="bloc4"> bloc4 dynamique en hauteur bloc4 dynamique en hauteur </div> <div class="bloc5"> bloc5 dynamique en hauteur bloc5 dynamique en hauteur </div> </div> </div> </body> </html>

je veux le bloc5 soit toujours colé en bas du bloc1 et cela quelque soit la hauteur du bloc2 ou du bloc4. malheureusement pour moi je ne peux pas fixer la hauteur du bloc1, elle varie selon ses contenus et le bloc5 doit toujours rester en bas du bloc1.
Quelqu'un peut venir à mon au secours.

merci,

**le Jeu Mai 21, 2009 17:09**

mais c'est un casse tête chinois ton truc !

**le Jeu Mai 21, 2009 23:00**

C'est tout simple à faire (et plutôt courant, j'utilise cette "astuce" à chaque kit graphique que je code) :

Utilise :

Code: Tout sélectionner: .clear { clear: both; } // Ou simplement utiliser un "clear:both" dans le div souhaité

Code: Tout sélectionner: <div class="clear"></div>

... dans le cas ou "Bloc 5" est toujours en bas de bloc 2 ou bloc 4 quelque soit leur taille.
J'ai testé sur ton code, tout marche, il faut juste que bloc 5 ne soit plus parent du bloc 3.

Ce qui donne :

**le Ven Mai 22, 2009 8:57**

Bonjour,
Merci guicara, mais je veux pas que le bloc5 sort du bloc3 donc il ne doit pas être en bas du bloc2. il doit rester en bas du bloc4 tout en ne dépassant pas la limite bas du bloc2.
Et je ne demande toujours si c'est possible ce que je cherche à faire.

**le Ven Mai 22, 2009 13:22**

Tu peux toujours utiliser un max-height...

**le Ven Mai 22, 2009 14:33**

le problème avec max-height ça ne fonctionne pas sous firefox

**le Ven Mai 22, 2009 15:45**

j'ai trouvé la solution.
j'ai modifié les codes comme ceci:

Code: Tout sélectionner: .bloc1{background:yellow;width:500px;height:auto;display:block;border:1px black solid;}

par

Code: Tout sélectionner: .bloc1{background:yellow;width:500px;display:block;border:1px black solid;overflow: hidden;height:auto;position:relative;}

et

Code: Tout sélectionner: .bloc5{background:#FFC663;height:auto;width:200px;}

par

Code: Tout sélectionner: .bloc5{background:#FFC663;height:auto;width:200px;position:absolute;bottom:0px;right:0px;}

je m'explique:

j'ai donné au bloc1 un overflow: hidden pour qu'il prenne en compte les bloc internes avec leurs dimensions et puis le bloc5 une position absolute au bloc1.et ça marche parfaitement bien dans tous les navigateurs.

css : position

css : position

Re: css : position

Re: css : position

Re: css : position

Re: css : position

Re: css : position

Re: css : position

Lectures recommandées sur ce thème :

Qui est en ligne