3 columns, middle one with flexible width

Question

I\'d like to have a layout that consist of three adjacent divs. Side divs have static width (it may change via javascript) and center div fills a remaining area. When the fi

Answer 1

You can do that by floating col1 and col3 to the left and to the right, with a fixed width.

Then add a left and right margin to col2 equal to the width of col1 and col3.

This gives you three columns; col1 and col3 having a fixed width and col2 filling the available width:

(col2's content box in blue, and its margins in yellow)

<div class='container'>
    <div class='right'>
        col3
    </div>
    <div class='left'>
        col1
    </div>
    <div class='middle'>
        col2
    </div>
</div>



.container {
    overflow: hidden;
}
.right {
    float: right;
    width: 100px;
}
.left {
    float: left;
    width: 100px;
}
.middle {
    margin: 0 100px;
}

Try it here: http://jsfiddle.net/22YBU/

BTW if you need display: table, display: table-row and display: table-cell, use a table ;-)