Сделать так. Управляя только html. Css не трогать.
HTML
<div class="puzzle"> <div class="block5"></div> <div class="block7"></div> <div class="block3"></div> <div class="block1"></div> <div class="block4"></div> <div class="block6"></div> <div class="block8"></div> <div class="block2"></div> </div>
CSS
.puzzle{
width:300px;
margin:0 auto;
padding-top:5px;
}
.puzzle div{
margin-right:5px;
margin-bottom:5px;
}
.block1{
float:left;
width:70px;
height:220px;
background:#3498DB;
}
.block2{
float:right;
width:220px;
height:70px;
background:#3498DB;
}
.block3{
height:70px;
width:70px;
background:#8e44ad;
}
.block4{
float:left;
width:70px;
height:145px;
background:#e74c3c;
}
.block5{
float:right;
width:70px;
height:145px;
background:#e74c3c;
}
.block6{
float:right;
width:70px;
height:70px;
background:#f1c40f;
}
.block7{
float:right;
width:145px;
height:70px;
background:#2ECC71;
}
.block8{
float:left;
width:145px;
height:70px;
background:#2ECC71;
}