229

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
  • 2
    @hakre - Your link is in CSS, and this is in CSS3. Jun 26, 2012 at 20:28
  • 2
    how 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 ;) )
    – hakre
    Jun 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+)
    – hakre
    Jun 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...
    – BoltClock
    Jul 6, 2012 at 3:41

6 Answers 6

296

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

6
  • 41
    The 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)
    – shannon
    Jun 19, 2012 at 9:30
  • 16
    BTW: 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.
    – luiscubal
    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?
    – 19WAS85
    Jun 19, 2012 at 18:30
  • 2
    I have to say that, for most websites, using calc() for anything important is a bad idea. The browser support is just not good enough.
    – thirtydot
    Jun 20, 2012 at 0:11
  • 5
    Note 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.
    – casperOne
    Jun 21, 2012 at 15:06
159

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
  • 11
    How about this vs this?
    – Chango
    Jun 19, 2012 at 4:59
  • 4
    @Chango - That is purely amazing when you resize the window. Jun 19, 2012 at 4:59
  • 1
    @Chango may be that's you want to achieve jsfiddle.net/Nw3yd/6
    – sandeep
    Jun 19, 2012 at 5:22
  • 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.
    – Chango
    Jun 19, 2012 at 13:38
37

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
7

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
  • 2
    The 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.
    – Chango
    Jun 19, 2012 at 14:49
4

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>
-4

Yes we can do it by making

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

Thanks

1
  • 9
    This 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 B
    Jun 19, 2012 at 16:06

Not the answer you're looking for? Browse other questions tagged or ask your own question.