Make div fill the remaining space

Question

This question has been asked a million times, but I can’t find a 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 displayed, and div3 is sometimes displayed. div2 and div3 have a fixed width. I want div1 to fill the remaining space that div2 and possible div3 do not occupy. I want them to appear in that order from 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 in which divs change, so it writes div2 and div3 to a page with both fixed width and float ing. Thus, by the time div1 (now the last one) is written, the default width of 100% will fill 100% of the available width. Since other divs already occupy their space, the “available width” is what remains.

For other cases (for example, the last div fills a 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 order and width of the div - the same concept as this one works just fine.