28172 sujets

CSS et mise en forme, CSS3

Alignement vertical d'un div dans un autre div [résolu]

Bonjour,

Je veux aligner verticalement un div dans un autre div de façon à ce que le premier colle à la base du second (donc pas de marge entre le bord inférieur du div intérieur et le bord inférieur du dix extérieur).
Je ne peux pas utiliser un référencement par rapport au bord supérieur de mon div extérieur, car je ne maitrise pas sa hauteur.
J'ai essayé différentes solutions telles que marges inférieures à zéro, positionnement relatif, ... mais sans succès.
Ci-dessous mon 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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TEST</title>
<style type="text/css">
#ext{
  background: green; 
  height: 300px; width: 500px; 
  text-align: center; 
  }
#int{
  background: red; 
  height: 100px; width: 450px; 
  position: relative; bottom: 0;
  }
</style>
</head>
<body>
  <div id="ext">
    Texte de mon div extérieur
    <div id="int">
      texte de mon div intérieur
    </div>
  </div>
</body>
</html>


Je veux coller le rectangle rouge en bas du rectangle vert.

Merci pour toute aide !
Kampi
Modifié par kampi (14 May 2011 - 15:07)
Salut,
Essayes avec : 

#ext{
background: green; 
height: 300px; width: 500px; 
text-align: center; 
position:relative;
}
#int{
background: red; 
height: 100px; width: 450px; 
position: absolute; bottom: 0;
}
Merci Spiral123, ça marche impec pour l'alignement vertical.
J'ai encore un petit problème en alignement horizontal, que je résouds facilement en ajoutant un "left: 0;" derrière le "bottom: 0;".
Au poil !
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Bonjour Laurie-Anne,

Désolé, je ne suis pas un grand habitué des forums et j'ai raté cette règle. Mais c'est maintenant en ordre !

Bon week-end
Kampi
Sujet clos
Aller à