Box-Model klappt nicht

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Box-Model klappt nicht

    Hi,

    ich möchte ein websitedesign machen,aber es klappt nicht, #container soll so groß sein wie sein inhalt, also #main, und und dieses soll sich nach #inhalt und #navi richten, je nachdem was größer ist... leider klappt das nicht..:(

    hoffe mir kann jemand helfen, hier mal meine dateien:

    index.html:

    HTML-Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3. <html>
    4. <head>
    5. <title>.::TEST::.</title>
    6. <link rel="stylesheet" type="text/css" href="style.css">
    7. </head>
    8. <body>
    9. <div id=container>
    10. <div id=banner>
    11. </div>
    12. <div id=main>
    13. <div id=inhalt>
    14. test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />
    15. </div>
    16. <div id=navi>
    17. test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />
    18. </div>
    19. </div>
    20. </div>
    21. </body>
    22. </html>
    Alles anzeigen


    und style.css:

    Quellcode

    1. html, body {
    2. margin: 0, auto;
    3. background-color: black;
    4. font-family: Verdana;
    5. }
    6. #container {
    7. margin-left: auto; margin-right: auto;
    8. width: 800px;
    9. height: auto;
    10. padding: 10px;
    11. background-color: darkgrey;
    12. border: 2px double lightgrey;
    13. }
    14. #banner {
    15. margin-left: auto; margin-right: auto; margin-bottom: 20px;
    16. width: 780px;
    17. height: 120px;
    18. background-color: white;
    19. border: 1px double black;
    20. }
    21. #main {
    22. margin-left: auto; margin-right: auto;
    23. width: 760px;
    24. height: 100%;
    25. padding: 10px;
    26. background-color: lightgrey;
    27. border: 1px double black;
    28. }
    29. #navi {
    30. float: right;
    31. width: 160px;
    32. height: auto;
    33. padding: 10px;
    34. background-color: darkgrey;
    35. border: 1px groove black;
    36. }
    37. #inhalt {
    38. margin: 0, auto;
    39. float: left;
    40. width: 540px;
    41. height: auto;
    42. padding: 10px;
    43. background-color: green;
    44. border: 1px groove black;
    45. }
    Alles anzeigen
  • Hallo,

    bei Fragen rund um css und div-container die mit floats arbeiten ist YAML von Dirk Jesse das ultimative Werkzeug. Der IE ist einfach zu zickig aber was dort an Hacks und Patches dagegen eingebunden ist schon sehr gut.
  • Das ist kein Programm, sondern ein fertiger Rahmen um eigene Internetseiten darauf aufzubauen.
    Den Divs navi und inhalt fehlt als Abschluss ein div mit der Eigenschaft clear:both.
    Clearing in css ist aber ein komplexes Thema, deshalb die Empfehlung mit YAML.