28219 sujets

CSS et mise en forme, CSS3

Aligner le bas de 2 div [resolu]

bonjour, et au secours Smiley cligne

voila probleme tout simple pour les connaisseurs mais vraiment là j'arrive pas a trouver l'astuce.

je refait un site web avec des div que je vien de decouvrir Smiley biggol

mais je me retrouve face a un probleme.

je souhaiterais que le bas d'une division (appelé ici div#probleme) s'arrete a la meme hauteur que la div #corps, bref que le bas des deux div soit aligner

dessin explicatif:
upload/10613-divspage.jpg


et voici les codes que j'utilise:

html:
a écrit :

<body>
<div id="en_tete">
<!-- bannière -->
</div>

<div id="menu_h">
<!-- menu haut -->
<?php
include("menu_h.htm");
?>
</div>

<div id="menu_g">
<!--menu gauche-->

<?php
include("menu_g.htm");
?>

<div id="divprobleme">
blabla
</div>
</div>

</div>

<div id="corps">
<h1>blablabla</h1>
blablablablablablabla
</div>


</body>
</html>



css:
a écrit :

body {
background-color:#333333;
width: 858px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}
#en_tete
{
width: 858px;
height: 151px;
background-image: url("pixs/logo_haut_1.jpg");
background-repeat: no-repeat;
}


#menu_h
{
width: 858px;
height: 31px;
}

#menu_g
{
background-color:#fff;
float: left;
width: 140px;
border: none;
}
#menu_g a img
{
display: block;
}
#menu_g img
{
display: block;
}

#div_problem
{
background-color:#fff;
float: left;
width: 140px;
border: none;
height: 100%;
}

#corps
{
margin-left: 140px;
margin-bottom: 20px;
padding: 5px;

color: #B3B3B3;
background-color: #fff;
}



ne faite pas trop attention au parametre css actuel du div problem j'ai essayer plein de truc et je n'y arrive vraiment pas.

J'ai bien chercher partout dans le forum et sur le net
je compte donc sur vous s'il vou plait pour me donner l'astuce ou bien me dire si je dois m'organiser autrement

merci d'avance !!
Modifié par somwhere (29 Jan 2007 - 02:08)
somwhere a écrit :
je compte donc sur vous s'il vou plait pour me donner l'astuce ou bien me dire si je dois m'organiser autrement

Tu dois t'organiser autrement. Smiley lol

L'alignement horizontal de blocs est difficile en CSS, surtout s'il s'agit d'aligner les bords inférieurs, car il est impossible de dire à un bloc A de se caler sur les dimensions d'un bloc B. La seule chose qui permette d'obtenir un tel comportement, c'est un tableau.

Mais si on veut se passer de tableau (ce qui est globalement -- mais pas systématiquement -- une bonne idée) il reste des moyens. L'important n'est pas nécessairement de demander à div#problème de se dimensionner pour que son bord inférieur soit au même niveau que le bord inférieur de div#corps. L'important, c'est de donner cette impression visuelle.

Bref, on va faire du trompe-l'oeil, en jouant par exemple avec des images de fond.

Deux pistes :
Des blocs de même hauteur sans tableaux
http://www.pompage.net/pompe/colonnesfactices/
Sujet clos
Aller à