Paulo Mu Paulo Mu - 6 months ago 34
HTML Question

Div fill remaining horizontal space

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

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.