Geek Answers Handbook

A table with 100% width that leaves room for a floating div

I have a table that I use for a form. The solution should automatically adjust to two scenarios:

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

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

How can i do this?

+5
source share
2 answers

div overflow, visible, . width:100%. 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>
+8

div ,

display:none;

,

visibility:hidden;

100%, , div : none, div , . div, , div .

W3Schools

0

More articles:


All Articles