Is it possible to make a div 50px less than 100% in CSS3?
HtmlCssHtml Problem Overview
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.
Html Solutions
Solution 1 - Html
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
Solution 2 - Html
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
Solution 3 - Html
Another alternative is absolute positioning.
div {
position: absolute;
left: 0;
right: 50px;
}
But, Sandeep's solution is the one you should usually use. Just
avoid overusing float
. This prevents elements from naturally filling their container.
Solution 4 - Html
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;
}
Compatibility:
Firefox 3.6, Safari 5, Chrome 6, Opera 10, IE 9
Solution 5 - Html
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>
Solution 6 - Html
Yes we can do it by making
#custom_div{
width:100%;
margin-right:50px;
}
Thanks