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

Answer 1

My solution works with and without float: left.

HTML:

<div></div>

css:

div {
    height: 20px;
    background: black;
    float: left;
    width: 100%;
    padding-right: 50px;
    box-sizing: border-box;
    background-clip: content-box; 
}​

Demo

Compatibility:
Firefox 3.6, Safari 5, Chrome 6, Opera 10, IE 9

Answer 2

Yes we can do it by making

#custom_div{
 width:100%;
 margin-right:50px;
 }

Thanks

Answer 3

jsFiddle

Using display block and margin. display:block when not combined with a defined height/width will try to fill it's parent.

header {
    width:100%;
    background:#d0d0d0;
    height:100%;
}
h1 {
    display:block;
    border:#000 solid 1px;
    margin:0 50px 0 0;
    height:100px;
}
<header>
    <h1></h1>
</header>

Answer 4

Another alternative is absolute positioning.

div {
    position: absolute;
    left: 0;
    right: 50px;
}

fiddle

But, Sandeep's solution is the one you should usually use. Just avoid overusing float. This prevents elements from naturally filling their container.

Answer 5

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

Answer 6

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