DIV, столкнувшись с ТАБЛИЦЕЙ в чистом html

Question

В приведенном ниже коде table, который должен быть ниже div, сталкивается с ним и появляется в середине его.

Любая помощь приветствуется.

Fiddle here

<div id="header" width="100%"> 
    <center> 
     blabla 
    </center> 
    <table align="left" class="header"> 
     <tbody> 
      <tr> 
       <th>Links</th> 
      </tr> 
      <tr> 
       <td><a href="blabla">blabla</a></td> 
      </tr> 
      <tr> 
       <td><a href="blabl">blabla</a></td> 
      </tr> 
      <tr> 
       <td><a href="blabla">blabla</a></td> 
      </tr> 
     </tbody> 
    </table> 
    <table align="right" class="header">  
     <tbody> 
      <tr> 
       <th>contacts</th> 
      </tr> 
      <tr> 
       <td><a href="mailto:adude">this guy</a></td> 
      </tr> 
      <tr> 
       <td><a href="mailto:anotherdude">that other guy</a></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 
<table> 
    <tbody> 
     <tr> 
      <th>the table that shouldn't be here</th> 
      <th></th> 
     </tr> 
    </tbody> 
</table> 

Answer 1

Вам просто нужно «ясно: как» если вы не хотите, чтобы элемент влияет на значение флоат других элементов (или выравнивать в данном случае).

Вот что происходит, ваша первая таблица прикреплена слева, вторая - к правой, а третья - между двумя.

Вы можете сказать, третью таблицу, чтобы найти пустую строку, чтобы начать с помощью style="clear: both"

Работа fiddle here.

Обратите внимание на:

style = "clear: both" 

на нижней таблице

Answer 2

Пара вещей:

1. Вы используете <center>, который является устаревшим, according to W3C:

   Элемент был введен в HTML 3.2 - Элементы блока. Он устарел со времени HTML 4 - 15.1.2 Выравнивание.

   HTML5 классифицирует его как несоответствующую функцию.

2. В jsfiddle, который вы связали, стол, кажется, находится ниже div, поэтому Я не уверен, в чем проблема. Вы можете уточнить?