4x Padding=2%(oben+unten=4%) + 4x height=21% ergibt nicht 100%

  • Hallo zusammen,
    Ich verstehe den Zusammenhang bei folgender Konstellation nicht.


    HTML
    <div id="nav_left">
        <div id="left_box1"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula</p></div>
        <div id="left_box2"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p></div>
        <div id="left_box3"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p></div>
        <div id="left_box4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p></div>
    </div>



    Der nav_left Container überragt die 4 inner div's um 28px in der Höhe (Breite ist korrekt). Das entspräche ja eigentlich nicht einer 100% Füllung, die sich durch die padding und die height Angabe der inneren doch eigentlich ergeben müßte.
    Habe ich da einen Denkfehler?


    Gruß Ralph
    [Blockierte Grafik: http://www.directupload.net/file/d/3588/g3hzlizg_jpg]

  • Grad zu müde zum ausprobieren, aber hier meine Lösung für sowas:



    ^^

  • Danke Dir Wolf,


    mit box-sizing: border-box ist das Problem gelöst. Denke, daß sind die Feinheiten die man sich erst im Laufe der Zeit erarbeitet und nicht im Kurs lernt. Aber....


    warum obiges nicht aufgeht erschließt sich mir immer noch nicht. Man lernt doch: 500x500px box mit 2px padding ergibt ne box mit 504x504. Mit Prozentangaben abzüglich des paddings hat es in der Breite
    ja auch geklappt, nur die Höhe stimmte nicht. Ist für mich echt unverständlich. ?(

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!