Alinhamento de DIV para composição de imagens

by Salustiano Silva

HTML

<div id="wrapper">
    <div class="indawo eyodwa">1</div>
    <div class="indawo ezimbili">2</div>
    <div class="indawo amathathu">3</div>
</div>

CSS

html, body{
    width:100%;
    height:100%;
    background-color:yellow;
}
#wrapper{
    position:relative;
    background-color:green;
}
.indawo{
    position:absolute;
    background:none no-repeat scroll left top transparent;
    color:red;
    text-align:center;
    line-height:200px;
    font-weight:bold;
}
.eyodwa{
    top:0px;
    background-image:url(http://i.stack.imgur.com/4WwA2.png);
    overflow: hidden;
    width:592px;
    height:242px;
}
.ezimbili{
    top:105px;
    background-image:url(http://i.stack.imgur.com/sFCc9.png);
    overflow: hidden;
    width:592px;
    height:213px;
}
.amathathu{
    top:318px;
    background-color:blue;
    overflow: hidden;
    width:592px;
    height:200px;
}