Padding/width issue - Can I use box-sizing with a grid system e.g. 960 grid system?

Question

I have been using the 960 grid system for a while and I always have the problem when adding padding to my divs.

I am wondering if it is a good/safe practice to modify the grid system CSS and add box-sizing: border-box to my *grid_x* classes. Are there any disadvantages?

So far I have been using an internal div with extra padding, so I don't mess with my divs containing the grid classes. It has worked fine but it just fills my layout with extra divs all over the place.

Is box-sizing a good option or do you have any other work-around, solutions, suggestions?

Many thanks

Answer 1

i think it's the best if you add a box inside a grid_x, then add border for the box.

here is the example

html :

<div class="grid_1">
    <div class="box">
        test
    </div>
</div>

css:

.grid_1 {
    width:100px;
    height:100px;
}
.box{
    border:1px solid red;
}

Answer 2

I've been thinking the same thing court. I know the HTML Bones wordpress theme uses box-sizing and it works great. It's not supported in IE7 and down, so you'll need to find a workaround. IE7 aside, I'd say the answer is yes.

edit: Found the IE7 workaround http://code.google.com/p/ie7-js/ Works like a charm!