[Résolu] Une div dans une autre sans passer l'une par dessus l'autre

Bonjour a tous,

Développeur d'applications depuis plusieurs années maintenant, je commence a peine a me mettre vraiment a faire du code propre. A ce jour les veilles habitudes ont tendances a disparaitre(site en table, peu d'utilisation de css), au profit de div, de css3, de Javascript et tout ce qui va bien

Néanmoins j'éprouve une grande difficulté quand a la réalisation de site en div, en effet je me retrouve toujours face au problème suivant sans posibilité de le résoudre

Considéront deux div (le container de la partie centrale et une div contenant un objet dans ce container tel un element silverlight, flash, un applet google maps, du texte... peu importe)
le contenu de cette seconde div peut dépasser (en hauteur) le contenu de la première

Exemple concret:

<!-- Ma partie centrale -->
<div id="container">
  avec pour propriétés:
  position: absolute;
  min-height: 300px;
 width: 800px;
 top: 20px;
 left: 35%

     <div id="contenu">
    position: absolute;
    left: 5px;
    top: 5px;
    width:790px;
    margin-bottom: 5px;
    </div>

<!-- La suite du contenu de la partie centrale -->
</div>
<!-- Le reste du site -->

Comment est t'il possible et ceci sur tous les navigateurs actuels, de pouvoir faire en sorte que la div contenu ne dépasse jamais la hauteur de son container (sans couper une partie ^^) et donc que la div container grandisse en fonction de ce qu'il y a dans la div contenu

Merci par avance de vos réponses, cela m'aidera beaucoup.

PS: Désolé de poster quelque chose qui pourrait avoir été répondu ailleurs, mais tout ce que j'ai testé a ce jour ne m'a pas aidé dans mon problème.
Modifié par Shadow1779 (23 Feb 2010 - 22:16)

Logiquement, il faudrait que ta div "contenu" ne soit pas sortie du flux, autrement dit, ne soit pas en position:absolute dans "container". Logiquement, cela devrait suffire à ce que ta div container s'adapte selon la hauteur de ta div contenu.

Au lieu de

position: absolute; 
    left: 5px; 
    top: 5px; 
    width:790px; 
    margin-bottom: 5px; 

Il faudrait plutôt qqch dans le genre

    margin-left: 5px; 
    margin-top: 5px; 
    width:790px; 
    margin-bottom: 5px; 

Mieux encore, grouper les margin si elles sont toutes les mêmes, sinon top right bottom left

    margin: 5px; /* à supposer que ta margin soit de 5px partout, sinon margin:5px 0 5px 5px; */
    width:790px; 

et voilou, ça devrait être bon, enfin, je ne peux pas en dire plus à froid.


EDIT : [résolu] ou pas ?
Modifié par Nico3333fr (23 Feb 2010 - 11:27)

Effectivement c'est bien mieux comme ca , depuis le temps que je me creusais la tête. Il vrai que les divs sont beaucoup mieux pour la lisibilité du code mais les debuts sont un peu difficiles...

Cool !
Pense à éditer ton sujet et à ajouter [résolu] dans le titre.