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/

enter image description here

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

Float the blue div to the right and the green will naturally expand to fill the remaining space. — joshnh, Nov 24 '11 at 05:23

Brandon Gano · Accepted Answer · 2020-03-25T17:18:23.287

23

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/

edited Mar 25 '20 at 17:18

answered Nov 24 '11 at 05:20

Brandon Gano

6,430
1
25
25

+1 I'm all out of votes but this answer is simple, and doesn't involve any of the issues with positioning. – joshnh Nov 24 '11 at 05:31
1

OMG so simple, I tried this but doesn't work, because I put the div opposite. http://jsfiddle.net/5AtsF/1/ Why? – Vitim.us Nov 24 '11 at 05:45
1

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 http://css-tricks.com/2841-the-css-box-model/ for more information. – Brandon Gano Nov 24 '11 at 05:59
2

This doesn't work with non-div elements, even if you set `display:block;` – Cerin Nov 06 '13 at 22:45
Is it just me, or does this not actually work? In the fiddle it takes up the full width, rather than the remaining width. – Stephen Oberauer Sep 25 '18 at 10:34
animuson's answer below (https://stackoverflow.com/a/8252577/394157) uses margin-right to fix it. – Stephen Oberauer Sep 25 '18 at 10:46
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 – user3163495 Mar 25 '20 at 05:18
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. – Brandon Gano Mar 25 '20 at 16:44
I added a basic flexbox example. – Brandon Gano Mar 25 '20 at 17:18
`flex-grow: 1` is the key! – Shivam Jha Apr 23 '21 at 11:29

score 4 · Answer 2 · answered Jul 11 '14 at 14:33

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);

score 4 · Answer 3 · answered Aug 10 '18 at 17:48

4

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;
}

answered Aug 10 '18 at 17:48

fabianfiorotto

139
1
4

Love you! Such an elegant one-liner :) – milkamar Sep 21 '19 at 08:33

score 2 · Answer 4 · answered Nov 24 '11 at 05:26

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).

sandeep · Answer 5 · 2011-11-25T16:04:18.550

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

adramazany · Answer 6 · 2015-04-15T05:25:34.797

0

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

label text

edited Apr 15 '15 at 05:25

answered Apr 15 '15 at 05:05

adramazany

625
9
15

score 0 · Answer 7 · edited Apr 15 '22 at 18:13

0

Try CSS calc() function.

width: calc(100% - 100px);

That's it

edited Apr 15 '22 at 18:13

Syed Ekram Uddin

2,907
2
29
33

answered Apr 13 '22 at 16:10

ex1t3

55
12

score 0 · Answer 8 · answered Nov 24 '11 at 05:25

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>

Jason Gennaro · Answer 9 · 2011-11-24T05:37:19.023

0

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/

edited Nov 24 '11 at 05:37

answered Nov 24 '11 at 05:26

Jason Gennaro

34,535
8
65
86

Float and 100% width *do not belong together*. This works the same without the `flaot: left`. – animuson Nov 24 '11 at 05:34
only works on a empty div, if I like to put a input inside, the problem still the same. http://jsfiddle.net/EM8gj/2/ – Vitim.us Nov 24 '11 at 05:37
Thanks @animuson. You're right. That was a leftover bit of code from me fiddling. Edited now. – Jason Gennaro Nov 24 '11 at 05:37

How to fill 100% of remaining width

9 Answers9

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

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

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

Linked

Related