Tengo un problema extraño al colocar un conjunto de divs dentro de otro div. Creo que será mejor describirlo con una imagen:

Dentro del div (#box) negro hay dos divs (.a, .b) que tienen que posicionarse en el mismo lugar. Lo que estoy tratando de lograr se muestra en la primera imagen, la segunda es el efecto que obtengo. Parece que los divs fueron flotados sin compensación o algo, lo que obviamente no es el caso. ¡Cualquier idea sería bienvenida!

Aquí está el código para esta muestra:

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>