Ich habe ein seltsames Problem beim Positionieren einer Gruppe von Divs in einem anderen Div. Ich denke, es ist am besten, es mit einem Bild zu beschreiben:

Innerhalb des schwarzen (#box) div befinden sich zwei divs (.a, .b), die an derselben Stelle positioniert werden müssen. Was ich versuche zu erreichen, ist im ersten Bild abgebildet, das zweite ist der Effekt, den ich bekomme. Es sieht so aus, als ob die Divs ohne Clearing oder etwas anderes geschwommen wären, was offensichtlich nicht der Fall ist. Irgendwelche Ideen wären willkommen!

Hier ist der Code für dieses Beispiel:

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>