У меня есть несколько контейнеров, и их дети только абсолютные / относительно позиционированные. Как установить высоту контейнеров, чтобы их дети были внутри них?

Вот код:

HTML

<section id="foo">
    <header>Foo</header>
    <article>
        <div class="one"></div>
        <div class="two"></div>
    </article>
</section>    

<div style="clear:both">Clear won't do.</div>
<!-- I want to have a gap between sections here -->

<section id="bar">
    <header>bar</header>
    <article>
        <div class="one"></div><div></div>
        <div class="two"></div>
    </article>
</section>  

CSS

article {
    position: relative;
}

.one {
    position: absolute;
    top: 10px;
    left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: absolute;
    top: 10px;
    right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}

Вот jsfiddle. Я хочу, чтобы текст "бар" появлялся между 4 квадратами, а не за ними.

http://jsfiddle.net/Ht9Qy/

Какие-нибудь легкие исправления?

Обратите внимание, что я не знаю высоту этих дочерних элементов и не могу установить height: xxx для контейнеров.