Три таблицы рядом друг с другом переполняют контейнер div?

У меня проблема с макетом моей страницы. Я хочу создать 3 таблицы и установить их рядом друг с другом, поэтому я установил для них атрибут float «слева», но высота контейнера div фиксируется только с 3-й таблицей, две первые таблицы переполняются div. Пожалуйста, помогите мне исправить это. Вот моя страница

<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>​

и вот стиль

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;
}​
0
задан StevenChow 17 March 2012 в 10:55
поделиться