How to fill 100% of remaining width

Question

Is there any work around to do something like this work as expected? I wish there were something like that width:remainder; or width:100% - 32px;.

width: auto; doesn't works.

I think the only way possible is working around with paddings/margins, negative values, or float, or some html tags hack. I tried also display:block;.

I like to get the same result as this, without tables http://jsfiddle.net/LJGWY/

<div style="position: absolute; width: 100%; height: 100px; border: 3 solid red;" id="container">
    <div style="display:inline; width: (100%-100px); border: 3 solid green;">Fill</div>
    <div style="display:inline; width: 100px; border: 3 solid blue;">Fixed</div>
</div>

Branson

Float the blue div to the right and the green will naturally expand to fill the remaining space. – Cesspool

Answer 1

Updated answer:

The answers here are pretty old. Today, this can be achieved easily with flexbox:

.container {
  border: 4px solid red;
  display: flex;
}
.content {
  border: 4px solid green;
  flex-grow: 1;
  margin: 5px;
}
.sidebar {
  border: 4px solid blue;
  margin: 5px 5px 5px 0;
  width: 200px;
}

<div class="container">
  <div class="content">
    Lorem ipsum dolor sit amet.
  </div>
  <div class="sidebar">
    Lorem ipsum.
  </div>
</div>

Original answer:

Block level elements like <div> will fill 100% of the available width automatically. If you float one of them to the right, the contents of the other will fill the remaining space.

<div style="height: 100px; border: 3px solid red;" id="container">
  <div style="float: right; width: 100px; border: 3px solid blue;">Fixed</div>
  <div style="border: 3px solid green;">Fill</div>
</div>

http://jsfiddle.net/5AtsF/

Empurple

+1 I'm all out of votes but this answer is simple, and doesn't involve any of the issues with positioning. – Cesspool

OMG so simple, I tried this but doesn't work, because I put the div opposite. jsfiddle.net/5AtsF/1 Why? – Branson

The reason it doesn't work if you place the floated div second is because the first div fills the full width, forcing the second div to the next line. Take a look at css-tricks.com/2841-the-css-box-model for more information. – Empurple

This doesn't work with non-div elements, even if you set display:block; – Dropkick

Is it just me, or does this not actually work? In the fiddle it takes up the full width, rather than the remaining width. – Witticism

animuson's answer below (https://mcmap.net/q/599987/-how-to-fill-100-of-remaining-width) uses margin-right to fix it. – Witticism

this doesn't make the green div "fill the rest of the width", it just overlays the blue one on top of the green one and creates the illusion that the green one is filling the rest of the width – Quadroon

I updated the answer to be more accurate. It's the "contents" of a block-level element that fill the available space around a floated element. Not the block itself. At any rate, anyone using floats for this kind of thing today should consider flexbox instead. – Empurple

I added a basic flexbox example. – Empurple

flex-grow: 1 is the key! – Irma

Answer 2

If you don't know how big will be the fixed part you can use the flex 9999 hack.

<div class="container">
  <div class="fixedWidth"></div>
  <div class="variableWidth"></div>
</div>

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.fixedWidth {
    flex: 1;
}

.variableWidth {
    flex: 9999;
}

Aikoail

Love you! Such an elegant one-liner :) – Yolandayolande

Answer 3

For anyone looking over this now theres a newish css property method called calc which can perform this in a much more flexible fashion.

<div class="container">
    <div class="fixedWidth"></div>
    <div class="variableWidth"></div>
</div>

.fixedWidth{
width:200px;
}
.variableWidth{
width:calc(100%-200px);
}

As a word of warning, this is not very portable and support is ropey on mobile devices. IOS 6+ and andriod 4.4 i believe. Support is significantly better for desktop though, IE 9.0+.

http://caniuse.com/calc

I have used a JS hack in the past to achieve this technique if anyone is incredibly stuck, a different layout is more advisable though as resize is slower.

window.addEventListener('resize', function resize(){
    var parent = document.getElementById('parent');
    var child = document.getElementById('child');
    child.style.width = parseInt(parent.offsetWidth - 200) + "px"; //200 being the size of the fixed size element
}, false);

Papotto

Answer 4

This should do for you:

<div style="position: absolute; width: 100%; height: 100px; border: 3px solid red;" id="container">
    <div style="float: right; width: 100px; border: 3px solid blue;">Fixed</div>
    <div style="display: block; margin-right: 100px; border: 3px solid green;">Fill</div>
</div>

See the jsFiddle

This is assuming you're going to be removing the 3px borders from the end result (they overlap in the example because border width is not included in the width).

Teide

Answer 5

You can acheive this without change your markup with use display:table property for this:

.parent{
    position: absolute;
    left:0;
    right:0;
    height: 100px;
    border: 3px solid red;
    display:table;
}
.fill{
    margin-right: 100px;
    border: 3px solid green;
    display:table-cell;
    width:100%;
}
.fixed{
    width: 100px;
    border: 3px solid blue;
    display:table-cell;
}

Check the live example with no horizontal scrollbar

http://jsfiddle.net/WVDNe/5/

Another example but in better way check this:

http://jsfiddle.net/WVDNe/6/

note: it not work in IE7 & below

Check this also

http://jsfiddle.net/LJGWY/4/

It's work in all browsers.

Maleki

Answer 6

Try setting the position like so:

<div style="position: absolute; width: 100%; height: 100px; border: 3 solid red;" id="container">
    <div style="position:absolute; left: 0; top: 0; right: 100px; border: 3 solid green;">Fill</div>
    <div style="position:absolute; top: 0; right: 0; width: 100px; border: 3 solid blue;">Fixed</div>
</div>

Intertwine

Answer 7

You could put the fixed div inside the the fill div.

<div id="container">
    <div>Fill
        <div>Fixed</div>
    </div>
</div>

CSS

#container{
    position:absolute;
    width:90%;
    height:100px;
    border:3px solid red;
}

#container div{
    height:95%;
    border:3px solid green;
    width:100%;
}

#container div div{
    height:95%; 
    width:100px;
    border:3px solid blue;
    float:right;
}

Example: http://jsfiddle.net/EM8gj/3/

Salami

Float and 100% width do not belong together. This works the same without the flaot: left. – Teide

only works on a empty div, if I like to put a input inside, the problem still the same. jsfiddle.net/EM8gj/2 – Branson

Thanks @animuson. You're right. That was a leftover bit of code from me fiddling. Edited now. – Salami

Answer 8

you can use table style. create a div with table style and sub items be that's table-cell styles

label text

Upstroke

Answer 9

Try CSS calc() function.

width: calc(100% - 100px);

That's it

Garamond