Estou com um problema estranho ao posicionar um conjunto de divs dentro de outra div. Eu acho que será melhor descrevê-lo com uma imagem:

Dentro do preto (#box) div existem dois divs (.a, .b) que devem ser posicionados no mesmo lugar. O que estou tentando alcançar é retratado na primeira imagem, o segundo é o efeito que obtenho. Parece que os divs estavam flutuando sem limpar ou algo assim, o que obviamente não é o caso. Alguma idéia seria bem-vinda!

Aqui está o código para este exemplo:

CSS:

#box {
    background-color: #000;
    position: relative;
    padding: 10px;
    width: 220px;
}

.a {
    width: 210px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #fff;
    padding: 5px;
}

.b {
    width: 210px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: red;
    padding: 5px;
}

#after {
    background-color: yellow;
    padding: 10px;
    width: 220px;
}

HTML:

    <div id="box">
        <div class="a">Lorem</div>
        <div class="b">Lorem</div>
    </div>

    <div id="after">Hello world</div>