Set floating div to height: 100% | Div as Table | Responsive Table | Table Table-Row Table-Cell | Table Div

lefttttttttttttttttttttttttt

middleeeeeeeeeeeeeeeeeeeeeee

rightttttttttttttttttttttttt

You could do it by setting up a table-like structure of <div> elements in your HTML and then using display: "table", "table-row" and "table-cell". This will work because table cells in the same row automatically resize to the same height as the tallest cell. However, IE7 will not support table properties.

<div id="table">
    <div id="table-tr">
        <div id="table-td">
            lefttttttttttttttttttttttttt
        </div>
        <div id="table-td">
            middleeeeeeeeeeeeeeeeeeeeeee
        </div>
        <div id="table-td">
            rightttttttttttttttttttttttt
        </div>
    </div>
</div>

<style type="text/css">
#table {
    background-color: red;
    width: 300px;
    height: 120px;
    overflow: auto;
    padding: 1px;
    display: table;
    table-layout:fixed;
}

#table-tr {
    display: table-row;
}

#table-td {
    width: 33.34%;
    display: table-cell;
    background-color: #ccc;
    border: 1px solid red;
    word-wrap: break-word;
    padding: 3px;
}
</style>