Twee divs, zelfde class, verschillende breedte - Softwareontwikkeling

dinsdag 9 april 2013 15:57

Acties:

Prince of Persia!

Topicstarter

Ik loop tegen een raar probleem aan.

Ik heb twee divs van dezelfde class. In die class wordt een breedte (18%) en een padding (0 1%) gesteld.
Dan zijn er nog twee andere classes, die een breedte van respectievelijk 58% en 78% stellen, beiden ook met een 0 1% padding

Dus feitelijk geeft die eerste class de div een totale breedte van 20%, oftewel een vijfde, want width + padding-left + padding-right = 18 + 1 + 1 = 20. Op dezelfde manier geven die andere classes de div een breedte van 3/5 en 4/5.

Je zou zeggen dat 1/5 + 4/5 gelijk is aan 1/5 + 3/5 + 1/5:

code:

1 2	<...1/5...> <.........4/5.........> <...1/5...> <...3/5...> <...1/5...>

Maar dat blijkt niet het geval:

tl;dr: Waarom heeft kolom 1 een andere breedte op beide regels?

De volledige code die het voorbeeld reproduceert:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Demonstratie</title>
        <style type='text/css'>
            body {
                width: 960px;
                margin: 1em auto;
            }
            .ezgrid {
                display: table;
                border-spacing: 0px;
                width: 100%;
                margin: 0;
                padding: 0;
            }
                .ezgrid .ezcol {
                    display: table-cell;
                    height: 100%;
                    vertical-align: top;
                    margin:  0;
                    padding: 0px 1%;
                    outline: 1px solid #cccccc;
                }

            .ezcol-one-fifth        { width: 18%   }
            .ezcol-three-fifth      { width: 58%   }
            .ezcol-four-fifth       { width: 78%   }
        </style>
    </head>
    <body>
        <div class='ezgrid'>
            <div class='ezcol ezcol-one-fifth'>Regel 1, kolom 1</div>
            <div class='ezcol ezcol-four-fifth'>Regel 1, kolom 2&3</div>
        </div>
        <div class='ezgrid'>
            <div class='ezcol ezcol-one-fifth'>Regel 2, kolom 1</div>
            <div class='ezcol ezcol-three-fifth'>Regel 2, kolom 2</div>
            <div class='ezcol ezcol-one-fifth'>Regel 2, kolom 3</div>
        </div>
    </body>
</html>

Reporter: Mister Gandhi, what do you think of western civilisation?
Gandhi: I think it would be a good idea

dinsdag 9 april 2013 16:03

Acties:

Verwijderd

de ene is bij elkaar 96% en de andere 94%
18+78 vs 18+58+18

edit: ik vergeet de padding. Ik denk dat het door de outline komt die ook ruimte in neemt.

[ Voor 48% gewijzigd door Verwijderd op 09-04-2013 16:05 ]

dinsdag 9 april 2013 16:08

Acties:

muba

Prince of Persia!

Topicstarter

Akkoord, maar elke div heeft nog een padding van 2 (links + rechts),
dus de feitelijke rekensom is
20+80 vs 20+60+20

Right.
Nee, ik heb juist bewust gekozen om het verschil te demonstreren met een outline, want i.t.t. tot een border, neemt een outline geen ruimte in:

http://www.w3schools.com/cssref/pr_outline.asp:
The outline is not a part of the element's dimensions, therefore the element's width and height properties do not contain the width of the outline.

[ Voor 61% gewijzigd door muba op 09-04-2013 16:10 ]

Reporter: Mister Gandhi, what do you think of western civilisation?
Gandhi: I think it would be a good idea

dinsdag 9 april 2013 16:09

Acties:

Verwijderd

Maar je hebt padding van 1% maar ook een outline van 1px.
dus het is 20%+80%+4px vs 20%+60%+20%+6px

Daarnaast een padding zit in de div en een margin zit om de div:
http://www.casinoswijzer....argin-padding-met-css.php

dus de padding moet je niet meetellen voor de breedte omdat deze in het object zit.

[ Voor 55% gewijzigd door Verwijderd op 09-04-2013 16:13 ]

dinsdag 9 april 2013 16:31

Acties:

muba

Prince of Persia!

Topicstarter

Ok dan!
Ik dacht dat je de padding juist wel mee moest tellen, maar dat had ik duidelijk fout.

Nu is het opgelost door in de classes gewoon de volledig gewenste breedte aan te geven (20%, 60%, 80%), zonder te compenseren voor de padding. Dan werkt het perfect.

Bedankt!

Reporter: Mister Gandhi, what do you think of western civilisation?
Gandhi: I think it would be a good idea

dinsdag 9 april 2013 16:34

Acties: