Как лучше сделать гибкий макет ?

Question

[Andreii787]

У меня вышло сделать что хотел, но подскажите как это лучше было сделать, что бы не так коряво с кодом как у меня вышло.
(

<div class="wr">
            <div class="black"></div>
            <div class="pink">
                <div class="gray"></div>  
            </div>
            <div class="green"></div>
            <div class="white"></div>
            <div class="blue"></div>  
    </div>

.black{
    width: 410px;
    height: 70px;
    background-color: black;
    border:3px solid #691318;
    position:relative;
   
   
}
.pink{
    width: 300px;
    height: 150px;
    position:relative;
    top: 10px;
    
    border: 3px solid #691318;
    background-color: #FEAEC9;
    
}
.green{
    width:130px;
    height:50px;
    position:relative;
    top: -130px;
    left: 20px;
    background-color: green;
}

.white{
    width: 270px;
    height: 40px;
    position:relative;
    top:20px;
    border:2px solid #C9C7B8;
    top: -105px;
    left: 20px;
    background-color: white;   
}
.blue{
    width:130px;
    height:50px;
    position:relative;
    top: -225px;
    left: 160px;
    border:2px solid green;
    background-color: #7FFFFE;   
}
.gray{
    width: 100px;
    height: 150px;
    position:relative;
    top: 0px;
    
    border: 3px solid #691318;
    background-color: #7F7F7F;
    margin: 0px 0px 0px 310px;
}

.wr{
    width: 500px;
    margin: 0px auto;
}

body{
    background-color: #EFE3AF;
}

Answer 1

[kirigosh]

я бы лучше top,left,right,bottom поменял на margin и padding...

.black{
    width: 410px;
    height: 70px;
    background-color: black;
    border:3px solid #691318;
    margin-bottom:10px;
}
.pink{
    width: 300px;
    height: 150px;
    border: 3px solid #691318;
    background-color: #FEAEC9;
    padding:130px 0 0 20px;
}
.green{
    width:130px;
    height:50px;
    background-color: green;
}

отталкивался только от этих блоков.