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.

4

6 Answers

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:

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

MDN:

6

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

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.

0

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

1

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>

Yes we can do it by making

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

Thanks

1