<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style type="text/css"> .grid { border: 1px solid gray; font-size: 0; } .grid > div { display: inline-block; margin: 2px; } #a { background: #006; height: 46px; width: 96px; } #b { background: #009; height: 46px; width: 146px; } #c { background: #00c; height: 46px; width: 46px; } #d { background: #00f; height: 46px; width: 16px; } #e { background: #060; height: 96px; width: 96px; } #f { background: #090; height: 96px; width: 146px; } #g { background: #0c0; height: 96px; width: 46px; } #h { background: #0f0; height: 96px; width: 16px; } #i { background: #600; height: 16px; width: 96px; } #j { background: #900; height: 16px; width: 146px; } #k { background: #c00; height: 16px; width: 46px; } #l { background: #f00; height: 16px; width: 16px; } </style> </head> <body> <div class=grid> <div id=a></div> <div id=b></div> <div id=c></div> <div id=d></div><br> <div id=e></div> <div id=f></div> <div id=g></div> <div id=h></div><br> <div id=i></div> <div id=j></div> <div id=k></div> <div id=l></div> </div> </body> </html>