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

Question

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.

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 '12 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 '12 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 06 '12 at 03:41

Derek 朕會功夫 · Accepted Answer · 2012-07-24T22:20:53.290

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

edited Jul 24 '12 at 22:20

answered Jun 19 '12 at 03:18

Derek 朕會功夫

92,235
44
185
247

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 '12 at 09:30
16

BTW: Non-prefixed version should go after the prefixed version, not before. See https://developer.mozilla.org/Writing_Forward_Compatible_Websites Also, in my experience, lots of calc() situations can be replaced by `box-sizing`. – luiscubal Jun 19 '12 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 '12 at 18:30
1

@bfrohs - For IE 6/7, you can use `expression()`. – Derek 朕會功夫 Jun 19 '12 at 19:05
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 '12 at 00: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 '12 at 15:06

score 159 · Answer 2 · edited Jul 24 '12 at 06:54

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

edited Jul 24 '12 at 06:54

Mr. Alien

153,751
34
298
278

answered Jun 19 '12 at 04:37

sandeep

91,313
23
137
155

11

How about [this](http://jsfiddle.net/Nw3yd/3/) vs [this](http://jsfiddle.net/Nw3yd/4/)? – Chango Jun 19 '12 at 04:59
4

@Chango - [That](http://jsfiddle.net/Nw3yd/4/) is purely amazing when you resize the window. – Derek 朕會功夫 Jun 19 '12 at 04:59
1

@Chango may be that's you want to achieve http://jsfiddle.net/Nw3yd/6/ – sandeep Jun 19 '12 at 05: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 '12 at 13:38

score 37 · Answer 3 · edited Jul 24 '12 at 06:59

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.

edited Jul 24 '12 at 06:59

Mr. Alien

153,751
34
298
278

answered Jun 19 '12 at 05:10

gilly3

87,962
25
144
176

score 7 · Answer 4 · edited Jul 24 '12 at 07:05

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

edited Jul 24 '12 at 07:05

Mr. Alien

153,751
34
298
278

answered Jun 19 '12 at 14:37

Puyol

3,084
5
25
33

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 '12 at 14:49

score 4 · Answer 5 · answered Apr 18 '13 at 02:58

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>

Deepranshu · Answer 6 · 2012-12-13T11:48:48.683

-4

Yes we can do it by making

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

Thanks

edited Dec 13 '12 at 11:48

answered Jun 19 '12 at 09:15

Deepranshu

69
1
8

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 '12 at 16:06

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

6 Answers6

Linked

Related