Is it possible to make a div 50px less than 100% in CSS3? [duplicate]

Is it possible to make a div 50px less than 100% in pure CSS? I want the <div> to be only 50px less than 100%. I don't want any JavaScript.

Solution 1:

Yes you can. Without using the IE's expression(), you can do that in CSS3 by using calc().

div {
    width: 100%;
    width: -webkit-calc(100% - 50px);
    width: -moz-calc(100% - 50px);
    width: calc(100% - 50px);
}

Demo: http://jsfiddle.net/thirtydot/Nw3yd/66/

This will make your life so much easier. It is currently supported in the 3 main browsers: Firefox, Google Chrome (WebKit), and IE9: http://caniuse.com/calc

MDN: https://developer.mozilla.org/en/CSS/-moz-calc

Solution 2:

A DIV automatically takes its parent's width. So there is no need to define any width. Normally would simply write it like this:

div{
    margin-right:50px;
}

Check this fiddle