Div fill remaining horizontal space - css

Question

I have this following code:
<div class="parent">
<ul class="menu">
<li>this</li>
<li>width</li>
<li>is</li>
<li>dynamic.</li>
</ul>
<div class="something">
<span>so is this</span>
<table>because of this table.</table>
</div>
<div class="fill">
<span>and so is this. but this guy needs to fill the remaining width.</span>
</div>
</div>
Image
These 3 items - ul and 2 divs - are aligned side by side, and as you can see, they have dynamic widths. I have to make these 3 items fit inside div.parent, which width is fixed at 1200px.
Currently, I'm using 'float: left;' to align these 3 items side-by-side, and I can use 'display: inline-block;' if necessary [works perfectly]. But I've tried to use some tricks with 'display: table;' for the parent and 'display: table-cell;' for these 3 items, without success.
I need to fill this remaining space on the black div, which is the 'div.fill'. Any ideas?
EDIT2: http://jsfiddle.net/cAs9t/

Answer 1

Demo
Just add
div.fill { float: none; overflow: hidden; }
Where float: none removes the floating (you can also avoid applying float: left to .fill), and overflow: hidden (or anything different than visible) prevent floating elements from overlapping .fill.
Other ways:
You could use display: table-cell and display: table, but you couldn't specify which element should grow to fill all remaining space.
But if you want full control and want to distribute remaining spaces in a more complex way, you should use Flexboxes.

Answer 2

I made the parent display:table and the 3 children as display:table-cell. Now all 3 children fill the width of the parent and you don't need to float any of them. One advantage of this method is that you can utilize vertical-align and also avoid wrapping of blocks when the parent is shorter than the content. In a way, you get all the goodness of a table.
Υou can set the width of the first 2 children and leave the last without specifying width so that it will fill the parent container.
See this demo.

Answer 3

Use display:table for the container and display:table-row for its direct children.
Set height:0 for the divs with variable height and height:auto for the div that should fill the remaining space.
If the container needs a fixed height, whether in pixels or %, you can add a single div with {overflow-y:auto; height:100%} to the horizontal filler and add content within there.
<div style="height:300px; border:1px solid red;padding:2px;">
<div style="display:table; height:100%; width:100%;border: 1px solid blue;">
<div style="display: table-row; height:0; padding:2px; background-color:yellow;">
I take as much space as needed
</div>
<div style="display: table-row; height:auto; padding:2px; background-color:green;">
<div style="height:100%; overflow: auto;">
<div style="height: 500px">My parent will fill the remaining space</div>
</div>
</div>
<div style="display: table-row; height:0; padding:2px; background-color:yellow;">
<p>I take as much space as needed as well</p>
</div>
</div>
</div>

Answer 4

Flexbox solution
Note: Add flex vendor prefixes if required by your supported browsers.
.parent {
width: 1200px;
display: flex;
}
.menu {
margin: 0;
}
.menu li {
display: inline-block;
}
.fill {
flex-grow: 1;
}
<div class="parent">
<ul class="menu" style="background: #6cf">
<li>this</li>
<li>width</li>
<li>is</li>
<li>dynamic.</li>
</ul>
<div class="something" style="background: #fd6">
<span>so is this</span>
<table>because of this table.</table>
</div>
<div class="fill" style="background: #5c5">
<span>and so is this. but this guy needs to fill the remaining width.</span>
</div>
</div>