Positionnement de div

Salut à tous,

Je suis en train d'essayer de faire un truc qui, à première vue, paraissait tout simple... comme dab avec le positionnement des div...:roll:

J'aimerais parvenir à faire ça:

http://www.zimagez.com/zimage/positionementdiv.php

Pas compliqué, comme vous le voyez!

J'ai ceci:

<div id="contener">
<div id="contenu"></div>
</div>

J'aimerais ne pas définir de hauteur à ma div "contener" et que ce soit sont contenu qui définisse celle-ci.

J'ai essayé ceci mais le résultat n'y est pas:

#contener{
width:780px;
}
#contenu{
width:500px;
height:260px;
margin-left:auto;
margin-right:auto;
margin-top:50px;
margin-bottom:20px;
}

En fait, le bord inférieur de la div contener reste collé au bord inférieur de la div contenu. Bref, mon écart inférieur n'apparait pas et la hauteur de la div contener est plus petite que celle que je voudrais! Par ailleurs, ma div "contenu" n'est plus tout-à-fait centrée horizontalement, elles est légèrement décallée vers la droite.
Du coup, j'ai tenté ceci mais ça ne donne rien non plus:

#contenu{
width:500px;
height:260px;
margin-left:auto;
margin-right:auto;
margin-top:50px;
padding-bottom:20px;
}

J'ai également essayé ça et là, j'ai le résultat escompté:

#contenu{
width:500px;
height:260px;
margin-left:auto;
margin-right:auto;
margin-top:30px; /*(50-20 = 30)*/
padding:20px;
}

Est-ce comme ça qu'il faut que je procède? Ca ne me parait pas très propre comme méthode surtout que je préfère éviter que la div "contenu" ait un padding top, left ou right...