Three table side by side overflow of div container?

Question

I've got a problem with my page's layout. I want to create 3 table and set them side by side, so I set float attribute of them is "left", but the height of div container only fix with the 3rd table, two first table is overflow of the div. Please help me to fix it. Here is my page

<body>

<div id="main">

    <table id="tbSA" class="tb">
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
    </table>

    <table id="tbShops" class="tb">
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
    </table>

    <table>
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
    </table>

</div>
</body>

and here is style

body {
    background-color: #5c87b2;
}
#main {
    margin: 10px 10px 15px 10px;
    background-color: #fff;
}

table, td {
  border: solid 1px #e8eef4;
}

.tb {
    float:left;
    margin-right:10px;
}

score 2 · Answer 1 · answered Mar 17 '12 at 10:59

2

There are many ways, i would prefer using overflow:hidden; for #main.

http://jsfiddle.net/QBj6R/

#main {
    margin: 10px 10px 15px 10px;
    background-color: #fff;
    overflow:hidden;
}

answered Mar 17 '12 at 10:59

Alex

6,276
2
20
26

See [this](http://stackoverflow.com/a/1633170/295264) answer to see why overflow hidden is not always the best method – Starx Mar 17 '12 at 11:49

Starx · Accepted Answer · 2012-03-17T11:30:07.280

This sort problem is because your first two table are floated. but the last one is not so the div will correctly resize to it to wrap the third table.

But it order to make the div wrap around the floated table too. You have to clear the floats.

There are many ways to solve this:

The safest way is to use, a clearing div just before closing the parent div ^[Demo]
```
<div style="clear:both"></div>
```
Old popular way is to give overflow:hidden which will force the div to wrap around all the elements. This is what other answers are focused out [Demo]

The third way is to use a .clearfix class and is the most popular way nowadays. [Demo]

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

score 1 · Answer 3 · answered Mar 17 '12 at 11:01

1

Your table have float on it so you have to clear his parent which is #main.

#main{
 overflow:hidden;
}

check this http://jsfiddle.net/VbvLq/1/

answered Mar 17 '12 at 11:01

sandeep

91,313
23
137
155

See [this](http://stackoverflow.com/a/1633170/295264) answer to see why overflow hidden is not always the best method – Starx Mar 17 '12 at 11:50
@Starx It's never be a bad method Because it's work till IE6. But .clearfix have there limitation it's work till IE8 – sandeep Mar 17 '12 at 12:12

score 1 · Answer 4 · answered Mar 17 '12 at 11:06

I am not sure if i understand the question correctly but if you want to put the tables side by side, why dont you just wrap them in another table? Example:

<div id="main">
    <table>
        <tr style="width:33%;">
            <td >
                <table id="tbSA" class="tb">
                    <tr><td>Code</td></tr>
                    <tr><td>Code</td></tr>
                    <tr><td>Code</td></tr>
                    <tr><td>Code</td></tr>
                    <tr><td>Code</td></tr>
                </table>
            </td>
            <td style="width:33%;">
                <table id="tbShops" class="tb">
                    <tr><td>Code</td></tr>
                    <tr><td>Code</td></tr>
                    <tr><td>Code</td></tr>
                    <tr><td>Code</td></tr>
                </table>
            </td style="width:33%;">
            <td>
                <table>
                    <tr><td>Code</td></tr>
                    <tr><td>Code</td></tr>
                    <tr><td>Code</td></tr>
                </table>
            </td>
        </tr>
    </table>
</div>

Set the width of each td in the wrapping table to 33% and it will set all the tables next to each other

Three table side by side overflow of div container?

4 Answers4