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.

enter image description here

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()

Would it be possible to make a simplified example in a [jsFiddle](http://jsfiddle.net)? — Adrift, Apr 29 '13 at 15:22
perhaps an approximation would be okay with `width:90%` or something similar? If you need to abide by the exact `10px` you could introduce a wrapper element. — Christoph, Apr 29 '13 at 15:54

Timidfriendly · Accepted Answer · 2013-05-05T10:10:20.947

17

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;
}

edited May 05 '13 at 10:10

answered Apr 29 '13 at 15:34

Timidfriendly

3,224
4
27
36

padding !== margin ! Your solution is different to what the OP wants. – Christoph Apr 29 '13 at 15:54
@timidfriendly Compare both (with calc) http://jsfiddle.net/dj3hh/ (with box-sizing) http://jsfiddle.net/dj3hh/1/ – Ragen Dazs Apr 29 '13 at 19:48
For completeness; removing the padding-right from .fit and apply it to the is I believe exactly what you were looking for. – Timidfriendly May 05 '13 at 10:09
I highly recommend * { box-sizing: border-box; } for all new projects. I assume most people don't have to support IE7? – pip Oct 15 '14 at 14:39

score 1 · Answer 2 · answered Apr 29 '13 at 18:24

1

Put position: relative on the parent element, then do...

.fit {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 10px;
}

answered Apr 29 '13 at 18:24

methodofaction

70,885
21
151
164

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

2 Answers2