/* 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>