raklos raklos - 1 month ago 5
CSS Question

make a div fill up the remaining width

how can i make a div fill up the remaining width?

eg:

<div id="Main" style="width: 500px;">
<div id="div1" style="width: 100px;"></div>

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

<div id="div3" style="width: 100px; float: right;"></div>
</div>


how can i get div2 to fill up the remainder?

Answer

Try out something like this:

<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 will naturally take up 100% width of their container, there is no need to explicitly set this width. By adding a left/right margin the same as the two side divs, it's own contents is forced to sit between them.

Note that the "middle div" goes after the "right div" in the HTML

Comments