Mam dziwny problem z pozycjonowaniem zestawu div w innym div. Myślę, że najlepiej będzie opisać to obrazem:

Wewnątrz czarnego (#box) div znajdują się dwa divy (.a, .b), które muszą być umieszczone w tym samym miejscu. To, co próbuję osiągnąć, jest przedstawione na pierwszym zdjęciu, drugim jest efekt, który otrzymuję. Wygląda na to, że div były spławione bez czyszczenia lub czegoś, co oczywiście nie ma miejsca. Wszelkie pomysły byłyby mile widziane!

Oto kod tej próbki:

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>