Simpler "Fehler" im Quellcode bei normalenm Box-Modell?

  • Hallo zusammen ...


    Ich bin aktuell dabei mir HTML/CSS etc beizubringen.
    Nun habe ich ein normales <div>-Boxmodell aufgestellt ... allerdings bin ich anhand der Abbildung ein wenig ... sagen wir ... irritiert. Ich bastel und überlege nun schon ewig, aber es klappt einfach nicht.


    Hier zu meinem Problem. Ich habe ein simples <div> in den Body gepackt, ihm die Größe 1024*800 zugewiesen und es horizontal zentriert, Margin zum body ist hierbei 20px.


    Nun habe ich in das <div> 4 weitere <div>s gepackt. Von der Breitenangabe ergibt sich summiert immer 1024. Dieses wird im IE 10 auch richtig dargestellt. Das "Eltern-div" ist komplett gefüllt.
    In Chrome allerdings ist das nicht der Fall. Das "inhalt-<div>" füllt das "Eltern-<div>" nicht in der kompletten Breite aus. Das "header- und footer-<div>" allerdings schon, und da ist die breite fest definiert...


    Das letzte Problem, was ich nicht verstehe, ist ... addiert man nun die "height-Werte", dann kommt man insgesamt auf 780px. Das "Eltern-<div>" ist allerdings trotzdem komplett ausgefüllt, obwohl gegenüber der Definition ja 20px fehlen (die beiden border-bottom habe ich hier schon eingerechnet). Allerdings stellt sowohl Chrome als auch IE es so dar, als wären es 800px.


    Hier der Quelltext:



    Anscheinend stehe ich irgendwo auf dem Schlauch oder habe einen kompletten Denkfehler ... ich weiß es wirklich nicht.


    Könnt ihr mir bitte auf die Sprünge helfen?


    Vielen Dank im Voraus!

  • Das mit den 20px ist aber in der Höhe, nicht in der Breite.


    Das padding ist ja auch nur top gesetzt, zieht also auch nur von der Höhe etwas ab ...


    Das erklärt leider nicht das Problem mit width ... :(

  • Das mit den 20px ist aber in der Höhe, nicht in der Breite.


    Das padding ist ja auch nur top gesetzt, zieht also auch nur von der Höhe etwas ab ...


    Du hattest ja auch ein Problem mit der Höhe.
    Das Padding wird immer dazuaddiert.
    Lies dich zum Thema Boxmodell ein.


    Dein Problem mit der Breite löst du wenn du dem Element mit der ID Inhalt auch float:left gibst und dem Element mit der ID footer ein clear:both.


    Lesetipp:
    http://css-technik.de/css-examples/219_9/
    http://www.thestyleworks.de/basics/float-rule.shtml
    http://www.thestyleworks.de/basics/visual_format.shtml

  • Vielen Dank! Funzt :)


    Werde mir das mal zu Gemüte führen ... das mit dem padding war auch so gemeint von mir, nur falsch formuliert :)
    Hab mit dem Box-Model aber allgemein noch so meine Problemchen ... Danke für deine Lesetipps :)

  • und ich bevorzuge beim boxmodel-gedöhnse die variante einen wrapper zu benutzen.
    ja manche schreien da nach "divsuppe" weil man nen container mehr hat, aber effizient hat man am ende des tages weniger code durch zusätzliche divs, als durch etliche css-files, die einzelnen browsern fixes anbieten.


    faktisch macht man nichts anderes, als dem container, der ne höhe oder breite definiert hat kein padding oder margin zu geben, sondern dafür ein div aussen drum oder innen rein schreibt und dem dann entsprechend margin (inneres div) oder padding (äußeres div) setzt.


    damit geht man 90% aller anzeigefehler durch unterschiedliche interpretation des boxmodels aus dem weg.