Three table side by side overflow of div container?
Question by StevenChow
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;
}
Answer by Starx
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:hiddenwhich 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
.clearfixclass 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%; }
