Ich habe einige Container und deren Kinder sind nur absolut / relativ positioniert. Wie stelle ich die Containerhöhe so ein, dass die Kinder in ihnen sind?

Hier ist der Code:

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;
}

Hier ist eine Jsfiddle. Ich möchte, dass "Balkentext" zwischen 4 Feldern und nicht dahinter angezeigt wird.

http://jsfiddle.net/Ht9Qy/

Irgendwelche einfachen Korrekturen?

Beachten Sie, dass ich die Größe dieser Kinder nicht kenne und die Größe xxx für Container nicht festlegen kann.