kenny119119
New Member
I'm using Twitter's Bootstrap to lay out a responsive site. I have two columns side-by-side inside a \[code\].container\[/code\] div. I would like to add a border to each side of the container. When I do so, the second column is pushed underneath the first.\[code\].row { border-left: 1px solid red; border-right: 1px solid red;}\[/code\]I thought I could correct this with the CSS \[code\]box-sizing\[/code\] property to incorporate the div's border into its width. It's not working, however.\[code\]* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}\[/code\]Any ideas why? How can I add a border on each side and keep the layout responsive without hacking Bootstrap's files?Code: http://jsfiddle.net/huV7A/5/Edit: bootstrap-combined.min.css is included in the jsfiddle. If you remove the border from \[code\].row\[/code\] you'll see the columns lay out properly.Edit: I'm trying to achieve this but with borders on the outside of the columns: http://jsfiddle.net/huV7A/10/