/* Main Containers */
body {
margin: 0;
}
#wrapper {
width: 960px;
}
#grid {
float: left;
width: 960px;
margin: 0;
padding: 0;
background: white;
}
.block {
position: absolute;
border: 1px solid black;
}
.inner {
height: 100%;
width: 100%;
}
.s1x1 {
height: 240px;
width: 240px;
}
.s2x1 {
height: 240px;
width: 480px;
}
.s3x1 {
height: 240px;
width: 720px;
}
.s4x1 {
height: 240px;
width: 960px;
}
.s1x2 {
height: 480px;
width: 240px;
}
.s2x2 {
height: 480px;
width: 480px;
}
.s3x2 {
height: 480px;
width: 720px;
}
.s4x2 {
height: 480px;
width: 960px;
}
.s1x3 {
height: 720px;
width: 240px;
}
.s2x3 {
height: 720px;
width: 480px;
}
.s3x3 {
height: 720px;
width: 720px;
}
.s4x3 {
height: 720px;
width: 960px;
}
/* Blocks Position */
.p0x0 {
top: 0px;
left: 0px;
}
.p1x1 {
top: 0px;
left: 240px;
}
.p2x0 {
top: 0px;
left: 480px;
}
.p3x0 {
top: 0px;
left: 720px;
}
.p0x1 {
top: 240px;
left: 0px;
}
.p1x0 {
top: 0;
left: 240px;
}
.p1x1 {
top: 240px;
left: 240px;
}
.p2x1 {
top: 240px;
left: 480px;
}
.p3x1 {
top: 240px;
left: 720px;
}
.p0x2 {
top: 480px;
left: 0px;
}
.p1x2 {
top: 480px;
left: 240px;
}
.p2x2 {
top: 480px;
left: 480px;
}
.p3x2 {
top: 480px;
left: 720px;
}
.creditline {
position: absolute;
top: 750px;
left: 10px;
font-family: Helvetica, sans-serif;
font-size: 13px;
color: gray;
}
<div id="wrapper">
<div id="grid">
<div class="block s2x1 p0x0"></div><div class="block s1x2 p3x0"></div><div class="block s1x1 p2x0"></div><div class="block s2x2 p1x1"></div><div class="block s1x1 p3x2"></div><div class="block s1x2 p0x1"></div>
</div>
</div>
<span class="creditline">Grid Builder by Dubberly Design Office</span>