css - Twitter BootStrap - Border Pushing Contents Down

Question

I'm designing an HTML 5 site using a header, article, and footer. I have an article with a border on the left and right side at 1px solid black. This is enough to cause the 12 column to wrap, forcing me to size down the app to 11 columns max. This leaves a white space on the right side I'd like to fill up... Is there an easy way to get twitter bootstrap to account for this extra 2px?

Thanks.

Answer 1

This has already been answered (couldn't find the question though)

You have to set borders to an inside element, not the spans themselves, because they are too tightly width'ed.

Another solution is to change the box-sizing to border-box. But this is css v3.

Update

Here are several examples, my best guess is the 3rd or 2nd solution.

• Demo (jsfiddle)

• Full screen demo (jsfiddle)

• Demo responsive (jsfiddle)

Solution 1 : inners

As such, will not respond well to responsive (needs @media rules to set the border depending on stacking)

<div class="row">
    <div class="span3">
        <div class="inner"></div>
    </div>
    <div class="span6">
        <div class="inner"></div>
    </div>
    <div class="span3">
        <div class="inner"></div>
    </div>
</div>

.row > [class*="span"]:first-child > .inner {
    border-left: 5px solid red;
}
.row > [class*="span"]:last-child > .inner {
    border-right: 5px solid red;
}

Solution 2 : fluid

As such, will respond well to responsive

<div class="row-fluid">
    <div class="inner-fluid clearfix">
        <div class="span3"></div>
        <div class="span6"></div>
        <div class="span3"></div>
    </div>
</div>

.row-fluid > .inner-fluid {
    border: 5px none green;
    border-left-style: solid;
    border-right-style: solid;
}

Solution 3 : box-sizing

As such, will not respond well to responsive (needs @media rules to set the border depending on stacking)

<div class="row foo">
        <div class="span3"></div>
        <div class="span6"></div>
        <div class="span3"></div>
</div>

.foo [class*="span"] {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

.foo.row > [class*="span"]:first-child {
    border-left: 5px solid orange;
}
.foo.row > [class*="span"]:last-child {
    border-right: 5px solid orange;
}

I hope you'll find your size.