css : position

He@deR · 21 Mai 2009

Bonjour,

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

Code:

<!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,

j-mi · 21 Mai 2009

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

guicara · 22 Mai 2009

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

Utilise :

Code:

.clear {
	clear: both;
}

// Ou simplement utiliser un "clear:both" dans le div souhaité

Code:

<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 :

He@deR · 22 Mai 2009

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.

guicara · 22 Mai 2009

Tu peux toujours utiliser un max-height...

He@deR · 22 Mai 2009

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

He@deR · 22 Mai 2009

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

Code:

.bloc1{background:yellow;width:500px;height:auto;display:block;border:1px black solid;}

par

Code:

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

et

Code:

 .bloc5{background:#FFC663;height:auto;width:200px;}

par

Code:

.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. 8)