Div Box Ausrichtungsproblem mit CSS


  • vKevin
  • 1133 Aufrufe 4 Antworten

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

  • Div Box Ausrichtungsproblem mit CSS

    Hey,

    mein Problem ist folgendes. Ich habe innerhalb einer Haupt-Div-Box weitere Div Boxen für z.b. Header, Navigation, Menü und Inhalt (Footer auch, ist aber im moment ausgeklammert). Header ist ganz oben, mit Titel links neben dem Logo. Dann darunter eine Hauptnavigation. Darunter sollen dann zwei nebeneinander floatende Div Boxen mit links Menü und rechts Inhalt kommen. Sobald ich aber einer der Div Boxen die Formatierung float:right oder float:left gebe, erscheint sie in FireFox außerhalb der Haupt-Div-Box (im Internet Explorer funktioniert es). Ich habe so etwas ähnliches aber schon häufiger gemacht und da hat es auch immer in Fire Fox funktioniert.

    Ich frage mich jetzt, was mache ich hierbei falsch, was übersehe ich. Wäre schön, wenn ihr mir weiterhelfen könntet.

    Der Link, um den sich das Problem handelt: Layout

    Der Quellcode lautet:

    PHP-Quellcode

    1. <?php
    2. error_reporting(E_ALL);
    4. include "inc/config/config.php";
    6. echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict //EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\n";
    7. echo "<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"de\" lang=\"de\">\n";
    8. echo " <head>\n";
    9. echo " <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />\n";
    10. echo " <link rel=\"stylesheet\" type=\"text/css\" href=\"css/clan1.css\">\n";
    11. echo " <title>CS:S Clanpage des -X- Clans</title>\n";
    12. echo " <meta name=\"author-personal\" content=\"Kevin Klein\" />\n";
    13. echo " <meta name=\"author-mail\" content=\"mailto:Sicef@web.de\" />\n";
    14. echo " <meta name=\"description\" content=\"Counter Strike Source Clanpage des -X- Clans\" />\n";
    15. echo " </head>\n";
    16. echo " <body style=\"text-align:center;\">\n";
    17. echo " <div id=\"main\">\n";
    18. echo " <div id=\"header\">\n";
    19. include "inc/main/header.php";
    20. echo " </div>\n";
    21. echo " <div id=\"navi\">\n";
    22. include "inc/main/navi.php";
    23. echo " </div>\n";
    24. echo " <div id=\"menu\">\n";
    25. include "inc/main/menu.php";
    26. echo " </div>\n";
    27. echo " <div id=\"content\">\n";
    28. include "inc/main/content.php";
    29. echo " </div>\n";
    30. echo " </div>\n";
    31. /*echo " <div id=\"footer\">\n";
    32. include "inc/main/footer.php";
    33. echo " </div>\n";*/
    34. echo " </body>\n";
    35. echo "</html>\n";
    36. ?>
    Alles anzeigen


    und die css Formatierung:

    HTML-Quellcode

    1. /* Haupt ID's # */
    2. #main {
    3. text-align: left;
    4. margin: 0px auto;
    5. width: 780px;
    6. border: 1px solid black;
    7. }
    8. #header {
    9. height: 108px;
    10. }
    11. #navi {
    12. border-top: 1px solid black;
    13. /*width: 50%;*/
    14. margin: 0px auto;
    15. padding-top: 5px;
    16. padding-bottom: 5px;
    17. }
    18. #menu {
    19. width: 120px;
    20. border: 1px solid black;
    21. }
    22. #content {
    23. float: right;
    24. width: 610px;
    25. /*padding: 0px 10px;*/
    26. border: 1px solid black;
    27. }
    28. #footer {
    29. text-align: left;
    30. margin: 10px auto;
    31. width: 780px;
    32. border: 1px solid black;
    33. float: left;
    34. }
    39. /* Styles für header */
    40. #title {
    41. height: 24px;
    42. padding-top: 40px;
    43. }
    44. #banner {
    45. float: right;
    46. height: 108px;
    47. width: 320px;
    48. }
    53. /* Styles für Navi */
    54. .navi {
    55. float: left;
    56. width: 24%;
    57. text-align:center;
    58. margin: 0px auto;
    59. }
    60. .link {
    61. }
    Alles anzeigen



    Ich hoffe, dass damit alle Infos gegeben sind. Falls noch Fragen offen stehen, stellt sie bitte.

    Danke im Vorraus.
    MfG
    Kevin



    Edit: Durch Zufallsexperimentieren habe ich herausgefunden, dass am Ende des Quelltextes ein clear: both das Problem löst. Aber leider habe ich keine Ahnung wieso und weshalb, also wenn mir das vielleicht jemand erklären könnte, wäre es wirklich nett!!

  • das clear:both verhindert, dass das folgende element dahinter gezogen wird.

    eigentlich ist es auch unnötig float:left und float:right zu benutzen.

    float left reicht eigentlich, der content div rückt eh nach