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.
-
2@hakre - Your link is in CSS, and this is in CSS3.– Derek 朕會功夫Jun 26, 2012 at 20:28
-
2how is CSS not CSS3 not CSS not CSS3 not CSS not ... ? If you ask explicitly for a CSS feature that has been formulated in version 3 only, please ask for it (not CSS generally - yes your question body differs from it's title here, so don't blame me ;) )– hakreJun 26, 2012 at 23:28
-
Well take a look at the body below the question title. You should use the body to make the CSS3 question explicit (and while we're talking please say if CSS3 or CSS3+)– hakreJun 26, 2012 at 23:31
-
@hakre: Agree with you - the only trace of "CSS3" in the original question was in the tags. If I had seen this question at the time it was asked I would have removed the tag, because indeed, CSS3 is CSS. It's not some entirely separate and different language, even though it extends far beyond what's possible in CSS2 (so-called "CSS"). But since edits have made it clear that this is a CSS3 question looking for a CSS3 answer, I guess we can leave it as it is...– BoltClockJul 6, 2012 at 3:41
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: 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
-
41The problems are a) the question wasn't clear about width vs. height and b) the self-answer isn't the best answer. For width, sandeep's is better, for height, gilly3's. The OP's answer isn't supported on some significant browser statistics today. (IE7/8)– shannonJun 19, 2012 at 9:30
-
16BTW: Non-prefixed version should go after the prefixed version, not before. See developer.mozilla.org/Writing_Forward_Compatible_Websites Also, in my experience, lots of calc() situations can be replaced by
box-sizing
. Jun 19, 2012 at 13:04 -
1"expression()" causes problems, because the browser recalculates the functions (inside the expressions) on each pixel of the mouse moviment, it impacts in processor uses. And in this case (with calc) this happens?– 19WAS85Jun 19, 2012 at 18:30
-
2I have to say that, for most websites, using
calc()
for anything important is a bad idea. The browser support is just not good enough. Jun 20, 2012 at 0:11 -
5Note that this question is specific to CSS3 and has a CSS3 specific answer, so it's not a dupe to others that were recommended which were only for prior versions. Jun 21, 2012 at 15:06
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
-
11
-
4
-
1
-
1@sandeep In your example both div don't have the same size, the green one has a fixed size and the red one has what's left minus 200px. Your solution is great, but I found interesting that particular use case of Derek's answer.– ChangoJun 19, 2012 at 13:38
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.
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
-
2The divs in your method are still occupying all the width of the screen, so if you put two of them you can't make them float on next to another.– ChangoJun 19, 2012 at 14:49
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
-
9This is the same answer as sandeep's, besides
width:auto;
, which has no effect. Your answer does not add any value at all. Instead of posting your own version of sandeep's answer you should have upvoted sandeep's answer.– Erik BJun 19, 2012 at 16:06