Position : absolue et hauteur du parent ?

Question

J'ai quelques conteneurs et leurs enfants ne sont positionnés que de manière absolue / relative. Comment régler la hauteur des conteneurs pour que leurs enfants soient à l'intérieur ?

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

Voici une jsfiddle. Je veux que le texte "bar" apparaisse entre 4 carrés, et non derrière eux.

http://jsfiddle.net/Ht9Qy/

Des solutions faciles ?

Notez que je ne connais pas la hauteur de ces enfants, et que je ne peux pas définir height : xxx pour les conteneurs.

Answer 1

article {
    position: relative;

}

//clear the float

article::after{
  content: '';
  clear: both;

}

.one {
    position: relative;
    float:left
    margin-top: 10px;
    margin-left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: relative;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}

Answer 2

C'est une autre réponse tardive mais j'ai trouvé un moyen assez simple de placer le texte "bar" entre les quatre carrés. Voici les modifications que j'ai apportées ; Dans la section de la barre, j'ai inséré le texte de la "barre" dans une balise center et div.

<header><center><div class="bar">bar</div></center></header>

Et dans la section CSS, j'ai créé une classe "bar" qui est utilisée dans la balise div ci-dessus. Après avoir ajouté cette classe, le texte de la barre est centré entre les quatre blocs de couleur.

.bar{
    position: relative;
}