<!DOCTYPE HTML> <html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> .grid { height: 60px; border: 10px solid green; position: relative; font-size:12px; } span { position: absolute; background: lime; border: 1px solid black; box-sizing: border-box; } .a { left: 40px; width: 60px; height: 40px; } .b { left: 20px; top: 40px; width: 60px; height: 20px; } .c { left: 80px; top: 40px; width: 60px; height: 20px; } .d { left: 0px; width: 20px; height: 60px; } </style> </head> <body> <div class=grid> <span class="a">a</span> <span class="b">b</span> <span class="c">c</span> <span class="d">d</span> </div> </body> </html>