Jak sprawić by div wypełnił całą pozostałą szerokość?

Wypróbuj coś takiego:

<style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; background-color: #fcc; }
    #middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
    #right-div { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="left-div">
        left div
    </div>
    <div id="right-div">
        right div
    </div>
    <div id="middle-div">
        middle div<br />bit taller
    </div>
</div>

divs naturalnie zajmą 100% szerokości kontenera, nie ma potrzeby jawnego ustawiania tej szerokości. Dodając lewy / prawy margines, taki sam jak dwa boczne divy, jego własna zawartość jest zmuszona siedzieć między nimi.

Zauważ, że „middle div” występuje po „right div” w kodzie HTML