'How to fill 100% of remaining width

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


Solution 1:[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/

Solution 2:[2]

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

Solution 3:[3]

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

Solution 4:[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).

Solution 5:[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.

Solution 6:[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>

Solution 7:[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/

Solution 8:[8]

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

label text

Solution 9:[9]

Try CSS calc() function.

width: calc(100% - 100px);

That's it

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 nepeo
Solution 3 fabianfiorotto
Solution 4 animuson
Solution 5
Solution 6 NeilC
Solution 7
Solution 8
Solution 9 Syed Ekram Uddin

Related Questions