Table with 100% width that leaves room for floating div

Question

I have a table that I'm using for a form. The solution needs it to be adjustable automatically to two scenarios:

• When there is no floating div to the right of the table, I want the table to take up 100% of the width.

• When there is a floating div to the right of the table, I want the table to give room for this div, and take up the remaining horizontal space.

How can I do this?

Answer 1

Put the table in a div with an overflow that is not visible and it will take up the remaining area next to the floated element. Then, the table inside that can have a width:100%. The code is below and here's an example jsfiddle: http://jsfiddle.net/rgthree/uEt35/

CSS

.floater {
    float:right;
}

.tbl-container {
    overflow:hidden;
}

.tbl-container > table {
    width:100%;
}

HTML

​<div class="floater">
   This is to the right.
</div>
<div class="tbl-container">
    <table>
        <tr>
            <td>hi</td>
        </tr>
    </table>
</div>