28220 sujets

CSS et mise en forme, CSS3

Caler un div en bas à droite en fonction de la hauteur du div parent

Bonsoir Smiley smile

J'ai essayé d'être explicite dans le titre du topic mais je ne sais pas si c'est réussi...
Comme un dessin vaut souvent mieux qu'un long discours, voici le topo :

http://img450.imageshack.us/img450/3816/pbdiv0cg.jpg

Mon problème est le suivant :
- le contenu du div rouge conditionne la hauteur globale du div parent bleu
- le div jaune doit être aligné en bas à droite du div bleu, sur la ligne de base du div rouge.
- le div jaune sera tjrs moins haut que le div rouge mais ça hauteur n'est pas définie

Tous mes essais de codage pour obtenir ce résultat ont été vain. Smiley sweatdrop
Auriez-vous une idée ?
Modifié par EcliptuX (22 Oct 2005 - 00:05)
Je pense qu'il faudrait essayer avec du Javascript si le contenu de ta DIV bleue est variable. En gros, tu définis d'abord une hauteur de base pour ta DIV jaune et ta DIV bleue, tu mesures via JS la hauteur de ta DIV bleue lors de son chargement et tu ajoutes la différence en marge pour la jaune.

Ce n'est pas très logique comme principe de fonctionnement... Pour quelle utilisation voudrais-tu faire cela?
Le but est relativement simple à comprendre :
- le div bleu est une zone de coordonnées
- le div rouge contient l'adresse postale (3 ou 4 lignes de texte)
- le div jaune contient le tel et l'email (2 ou 3 lignes de texte)

Je cherche donc simplement à obtenir une mise en page esthétique en CSS.
Je ne te cache pas que ça m'embêterai de passer par du javascript pour ce genre de truc...
Bonjour,

C'est amusant : seul IE6.0 Windows implémente correctement ce qu'il faut de CSS pour le faire simplement et naturellement :

<style type="text/css">
<!-- 
address, #postal, #contact {
padding: 10px;
}
address {
background-color: #979eff;
float: left;
}
#postal {
background-color: #ff8696;
display: inline-block;
width: 45%;
}
#contact {
background-color: #feff87;
display: inline-block;
margin-left: 10px;
}
-->
</style>
</head>
<body>
	<address>
	<span id="postal">
  	Duis autem vel eum iriure dolor in hendrerit<br />
  	In vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis<br />
  	At vero eros et accumsan<br />
  	Et iusto odio<br />
  </span>
  <span id="contact">
		01 01 01 01<br />
		test@test.test
	</span>
	</address>
</body>


Firefox en fait de la bouillie, et Opera 8.5 bugue sur l'alignement vertical du texte dans les inline-blocks (bug corrigé dans la toute récente version preview 9.0, d'ailleurs).

Mais, heureusement, un petit détour, dans ces 2 navigateurs par display:table-cell permettra à cette adresse de retomber sur ses pattes... Smiley cligne
Merci pour ces explications Laurent Denis.
Malheureusement j'abandonne pour le moment cette mise en page car il semblerait qu'il soit plus esthétique de tout aligner en haut. Donc un simple float: right; suffit.
Mais je vais garder cette piste sous le coude en cas de besoin Smiley smile
Modifié par EcliptuX (25 Oct 2005 - 20:29)
Bonjour !!
Je suis super contente de tomber sur ces explications, parce que c'est exactement ce que je cherche à faire.. et j'ai quelques petits soucis !
Je viens de tester ta page Laurent Denis, effectivement ça marche correctement sous IE 6, et pas sous Firefox...
En mettant comme tu le conseilles un display:table-cell dans
address, #postal, #contact {
padding: 10px;
display:table-cell;
}
Je retombe bien sur mes pattes comme tu dis.. mais le resultat est radicalement différent entre les 2 navigateurs !
Comment faire pour que le div jaune soit toujours en bas de page ??
Dans Firefox, avec display:table-cell, maintenant il fait exactement la même taille en hauteur que le div rouge.. et le texte se retrouve donc en haut.. alors que je souhaiterais qu'il se retrouve en bas de page, de la même manière que sous IE..
Quelqu'un a t'il un idée ?? Smiley ohwell
merci
Sujet clos
Aller à