CSS3 equivalent to width:calc(100% - 10px)

Question

I'm searching for an alternative to migrate my CSS - already working on FF and Chrome -, because QtWebKit it's not rendering some CSS3 feature yeat.

I have the following stuff:

.fit {
    width: -moz-calc(100% - 10px);
    width: -webkit-calc(100% - 10px);
    width: -o-calc(100% - 10px);
    width: calc(100% - 10px);
}

I want a class to fit all element as displayed in wireframe example.

Note: Almost all CSS3 features can be perfect rendered, but as sayed before *-calc() have issues and can't find other solution eg. using margin-right, padding-right etc.

@EDIT: I created a fiddle http://jsfiddle.net/dj3hh/ to show the expected behavior - You can resize fiddle and all margins respect 10px from right. I want a new way to do this withou calc()

Answer 1

If you change the box model rendering to box-sizing: borderbox then the padding will be included in the total width instead of being added to it. With this example I am assuming you are adding the class to the wrapping elements.

.fit { 
    width:100%
    padding-right:10px
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;     
    box-sizing: border-box; 

}

Browser support is very good; all modern browsers. Only you will need a polyfill for IE7 and under.

For more background info: paulirish.com/2012/box-sizing-border-box-ftw/

---

EDIT:

This is a solution that I believe completely meets your brief, please see fiddle: http://jsfiddle.net/David_Knowles/UUPF2/

.fit { 
    width:100%
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;     
    box-sizing: border-box; 
}

td {
    padding-right: 10px;
}