How can an element have a width of "100%-50px" using only CSS?

Question

Currently I am using JQuery to loop through all elements to resize them accordingly. This is what I do:

$('input.myinput').each(function () {
    $(this).css('width', ($(this).parent().width() - 50) + 'px');
});

This allows the input to be full width with only enough space left for my 50px button on its right.

This executes on window-resize. And there are about 100+ of these inputs on my site.

So are there any other ways to do this? Preferably using only CSS.

possible duplicate of [Div width 100% minus fixed amount of pixels](http://stackoverflow.com/questions/651317/div-width-100-minus-fixed-amount-of-pixels) — JJJ, Jan 16 '12 at 09:21
@Juhana, yes I've been to that Q. But If you go look at it's answers, then you'll see it solves a problem unique to that user's case. But Matijs helped out great. — Pangolin, Jan 16 '12 at 09:26

Matijs · Answer 1 · 2016-03-07T20:24:52.713

1

~~In the future you can use calc() for this… Check http://www.w3.org/TR/css3-values/#calc for more info. You can use http://caniuse.com/#search=calc to check on how well it's supported.~~

Nowadays support for calc() is pretty good.

.selector {
  width: calc(100% - 50px);
}

Does what it says on the tin.

edited Mar 07 '16 at 20:24

answered Jan 16 '12 at 09:22

Matijs

3,118
2
29
41

score 1 · Accepted Answer · answered Jan 16 '12 at 09:24

1

It's possible to hack this by adding an inner/outer div with % width and setting a negative margin px on the inside one. Otherwise there is no way to do this reliably/cross browser with CSS at this moment in time.

See here for examples.

answered Jan 16 '12 at 09:24

Dunhamzzz

14,682
4
50
74

score 1 · Answer 3 · answered Jan 16 '12 at 09:31

You can't do it with one container only, but it can be done with an inner and outer.

Basically, you set a padding on the outer div, and make sure the inner div expands to 100% — which is in this case the full width of the outer container, minus it's padding. If nothing else is set, a div extends to a width of 100%, so long as it is a block element and not floated.

See Fiddle

HTML

<div class="outer">
    <div class="inner">This is the inner div<div>
</div>

CSS

.outer {
    height:200px;
    padding:0 50px 0 0;
    background:#66ccff; }
.inner {
    height:100px;
    background:#ffa800; }

How can an element have a width of "100%-50px" using only CSS?

3 Answers3