should borders affect the layout?

Question

Using a basic layout such as...

<div class="span-23 last" id="main">
    <div class="span-18" id="column1">
        <div class="clear span-10" id="body1"> </div>
        <div class="span-6 prepend-1 append-1" id="body2"> </div>
    </div>
    <div class="span-5 last" id="column2"> </div>
</div>

When I define a border on any of the div's they either do not show up or move the page elements around. So do borders actually take up a px count outside of a div? If so how can I get around this?

I have seen some mention using position:relative; but that is not the problem here as I use that extensively normally.

Answer 1

Should borders affect layout? No. Peter Paul Koch said it best at quirksmode.org, (quoting himself):

Logically, a box is measured from border to border. Take a physical box, any box. Put something in it that is distinctly smaller than the box. Ask anyone to measure the width of the box. He'll measure the distance between the sides of the box (the 'borders'). No one will think of measuring the content of the box.

Web designers who create boxes for holding content care about the visible width of the box, about the distance from border to border. The borders, and not the content, are the visual cues for the user of the site. Nobody is interested in the width of the content.

But do borders affect layout? Sadly, the answer is yes. Consider this div:

.foo {
    width: 500px;
    padding: 5px;
    border: 1px solid blue;
}

This div will actually be 512px wide, because width sets the width of the contents, not the div. You have to add padding and border to get the actual width.

Edit: To correct this madness use box-sizing:

.foo {
    box-sizing: border-box;
    -moz-box-sizing: border-box;  /* FireFox requires the -moz- prefix */
    width: 500px;
    padding: 5px;
    border: 1px solid blue;
}

This div will be 500px wide, even with the padding and the border.

Demo at jsFiddle

^{It doesn't work in IE7 (which has less than 1% market share).}