Home/ Questions/Q 6237051
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T10:57:27+00:00

Using a basic layout such as… <div class=span-23 last id=main> <div class=span-18 id=column1> <div

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0