should borders affect the layout?

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 aro开发者_JAVA百科und. 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.

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).}

Yes, borders take up physical space. So, if you set a div to be 100%, then give it a 1px border, it will be 2px wider than the container it is in.

To get around it, you can decide not to set a width at all (or 'auto') so that it will automatically adjust to account for padding and borders.

Alternatively, you can nest elements, giving an outer div a specific width, then an inner div the border.

There's other options too.

ADDENDUM:

Ah, it looks like you are using blueprint.css

Blueprint.css is not designed to handle adding borders to the layout containers. This will break the grid.

I've modified blueprint.css in the past to accomodate this. Typically I'll add some unique classes that can be applied to span-x divs:

.span-border {border: 1px solid black;}
.span-8.span-border {margin-left: -1px; margin-right: 9px;}

The above is based on a 10px 'gutter' between columns. What you do is reduce the gutter on each side of a span-x that has a border applied to it to accommodate the space the border takes up.

Border is counted into the whole width and height of the element.
To avoid it, use outline.

.element{
    outline: 1px solid black;
}

Just don't specify width to any of your block level elements. Then the borders will get accounted for.

The CSS box model defines border and padding to be outside of width and height, that is, width and height specify content area size only, and don't include border or padding.

The old IE box model, by the way, which is what you get in IE < 6, and quirks mode, included border and padding in the width and height. outline is somewhat like border but does not increase element size.

Borders take up pixels outside of the actual element...so, if you have a div of width: 20px and border: 1px, the full width is 22px. One way to get around it is to have a container with your specified width, then have an inner div with no specified width and the border.

Here is an example: http://jsfiddle.net/pWB9U/