100% Width Table with room for floating el (StackOverflow)

For StackOverflow Question: http://stackoverflow.com/questions/9299234/table-with-100-width-that-leaves-room-for-floating-div/9299397#9299397

HTML

<p>This guy makes room for a floated element.</p>


<div class="tbl-container">
   
    <table>
        <tr>
            <td>For Him</td>
            <td>For Her</td>
        </tr>
    </table>
</div>

<div class="clearer"></div>

CSS

.floater {
    float:right;
    height:100px;
    width:100px;
    background:#F00;
}

.tbl-container {
    overflow:hidden;
    background:#FF0;
    /* You won't see this yellow container */
    /* since the green table takes up it's full width */
}

.tbl-container table {
    background:#0f0;
    width:100%;
}

p {margin-bottom:5px;}
.clearer {clear:both; height:25px;}