Div fill remaining horizontal space

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.