Un div dans un div : ils ne s'emboîtent pas

Un div dans un div : ils ne s'emboîtent pas - HTML/CSS - Programmation

Marsh Posté le 17-04-2008 à 16:54:20    

Bonjour,  
 
Je me permets de poser ma question car ça fait plusieurs heures que je sèche sur le problème. Je souhaite mettre un div dans un autre. Jusque-la rien de compliqué. Alors j'ai écrit le code CSS et HTML suivant :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Index</title>
  6. <link href="./aux/style.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <body>
  9. <div id="containeur">
  10.   <div id="left">
  11.     <p>Test 1</p>
  12.     <p>Test 2</p>
  13.   </div>
  14. </div>
  15. </body>
  16. </html>


 

Code :
  1. @charset "UTF-8";
  2. * {
  3. font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
  4. }
  5. h1 {
  6. font-size:14px;
  7. color:rgb(0, 102, 153);
  8. padding: 3px;
  9. margin-top: 0px;
  10. margin-bottom: 3px;
  11. }
  12. p {
  13. font-size: 12px;
  14. font-family: Verdana;
  15. white-space: normal;
  16. display: block;
  17. padding: 3px;
  18. margin-bottom: 9px;
  19. margin-top: 0px;
  20. }
  21. body {
  22. background-color: #ece4d9;
  23. background-repeat: repeat-x;
  24. display: block;
  25. }
  26. #containeur {
  27. width: 952px;
  28. margin-top: 30px;
  29. margin-right: auto;
  30. margin-left: auto;
  31. background-color: #FF0000;
  32. clear: both;
  33. float: none;
  34. padding: 12px;
  35. }
  36. #left {
  37. width: 580px;
  38. margin-top: 20px;
  39. margin-left: 0px;
  40. float: left;
  41. text-decoration: none;
  42. height: auto;
  43. overflow: visible;
  44. clear: left;
  45. }


 
Le problème c'est qu'en l'état le div left n'est visuellement pas dans le div containeur. Si je supprime la propriété float de left, alors tout est ok. Le hic c'est que j'ai besoin de cette propriété car je souhaite insérer, au final, deux div dans le div containeur (afin d'avoir deux colonnes). Comment faire alors ?  
 
Merci de votre aide.


---------------
Un être en tant qu'être ne pourrait-il pas être autre qu'il n'est s'il n'explique pas lui-même son être ?
Reply

Marsh Posté le 17-04-2008 à 16:54:20   

Reply

Marsh Posté le 17-04-2008 à 17:24:50    

encore un probleme de contexte de formatage, ajoute un overflow:hidden sur #containeur

Reply

Marsh Posté le 17-04-2008 à 17:30:01    

Nom d'un chien, bien vu et surtout merci !


---------------
Un être en tant qu'être ne pourrait-il pas être autre qu'il n'est s'il n'explique pas lui-même son être ?
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed