Question

This question has been asked a million times but I can’t seem to find the solution for my specific version. Here is what I have:

<div>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

div1 and div2 are always shown and div3 is only sometimes shown. div2 and div3 have fixed widths. I want div1 to fill the remaining space that div2 and possible div3 are not taking up. I want them to appear in the above order left to right ([div1][div2][div3]).

Can anyone help with this?

Answer 1

Answer:

See in action: http://jsfiddle.net/C9Q3F/3/

<style>
    div { height:100px; }
    #div1 { background-color:red; }
    #div2 { background-color:blue; width:75px; float:right; }
    #div3 { background-color:green; width:100px; float:right; }
</style>
​
<div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div1"></div>
</div>​

Explanation:

The reason this works, is – the order of the divs changed – so it writes div2 and div3 to the page, both with fixed widths, and both floating. So by the time div1 is written (now last), it’s default 100% width will fill the 100% of the available width. Since the other divs are taking up their space already, the “available width” is what’s left.

For other cases (eg. last div fills space):

If you want the last div to fill the remaining space instead of the first, like this question/answer, just tweak it to use float:left; instead of float:right; and change the div order and widths – same concept as this and works just fine.