Обтекание элемента статьи вокруг стола

Question

Моя разметка выглядит следующим образом:

<article>
  <header> 
    <hgroup>
        <h1>Foo </h1>
        <h2>Bar</h2>
        <h3>1337</h3>
    </hgroup>
  </header>
    <table>
      // etc
    </table>
</article>

Я хочу, чтобы элемент article имел границы, поля и отступы:

article {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
}

Таблица отличается по ширине (на разных страницах), так же как и окно просмотра для каждого пользователя.Какой CSS я должен использовать, чтобы убедиться, что элемент article всегда «оборачивается» вокруг таблицы, например, имеет одинаковые отступы?

Поведение по умолчанию для article (или div) - ширина 100%, которая обычно слишком велика, но иногда слишком мала.

Answer 1

Просто плавайте, и он примет ширину своих дочерних элементов:

article {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  float: left;
}

http://jsfiddle.net/pXcKg/

Конечно, если у вас есть какие-либо элементы под article, очистите поплавокс clear: both;