如何在不弄乱布局的情况下为div添加边框？

我有以下几个要素:

    

        

        

            
Lorem ipsum
 
            
Whatnot.
        
        

    

遵循这种风格:

/* ~~ this fixed width container surrounds all other divs~~ */
 #container {
    width: 960px;
    background-color: #FFF;
    margin: 0 auto;
    overflow: hidden;
}
#sidebar1 {
    float: left;
    width: 180px;
    /*border: 2px solid black;*/
    background-color: #EADCAE;
    padding: 0px 0px 100% 0px;
}
#content {
    padding: 10px 0;
    width: 600px;
    float: left;
}
#sidebar2 {
    float: left;
    width: 180px;
    /*border: 2px solid black;*/
    background-color: #EADCAE;
    padding: 0px 0px 100% 0px;
}

我正在尝试实现这种布局:http://jsfiddle.net/QnRe4/

但是一旦我取消评论边界,就会变成这样:http://jsfiddle.net/FZxPQ/

**解决了**

边框宽度被添加到每个元素的总宽度中,使得它们太宽而无法容纳在容器中.从每列宽度中删除2x边框宽度可以解决问题:http://jsfiddle.net/FZxPQ/4/

CSS box-sizing救援!这个性质

更改用于计算元素宽度和高度的默认CSS框模型

该border-box值意味着

width和height属性包括填充和边框

/* support Firefox, WebKit, Opera and IE8+ */
#container, #sidebar1, #sidebar2 {
         box-sizing: border-box;
    -moz-box-sizing: border-box;
}

但是,浏览器支持不是100%标准化的.

正如其他答案已经提到的那样,推动侧栏不对齐的额外宽度是因为宽度计算包括边界宽度.box-sizing只是告诉浏览器一个具有给定宽度/高度的元素应该在最终的宽度/高度计算中包含任何边框和填充值.