How to fill 100% of remaining width
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);
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;
}
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/