Tengo algunos contenedores y sus hijos solo están en posición absoluta / relativa. ¿Cómo ajustar la altura de los contenedores para que sus hijos estén dentro de ellos?

Aquí está el código:

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

Aquí hay un jsfiddle. Quiero que el texto de "barra" aparezca entre 4 cuadrados, no detrás de ellos.

http://jsfiddle.net/Ht9Qy/

¿Alguna solución fácil?

Tenga en cuenta que no sé la altura de estos niños y no puedo establecer la altura: xxx para contenedores.