<html> <style> .box { border: 2px solid green; padding: 2px; height: 25px; width: 25px; } .container { border: 2px solid blue; height: 75px; width: 75px; position: absolute; } .topleft { position: absolute; top: 0px; left: 0px; } .topright { position: absolute; top: 0px; right: 0px; } .bottomleft { position: absolute; bottom: 0px; left: 0px; } .bottomright { position: absolute; bottom: 0px; right: 0px; } </style> <body> <div class="container"> <div class="topleft box"></div> <div class="topright box"></div> <div class="bottomright box"></div> <div class="bottomleft box"></div> <div style="width:100%; height:100%; background: gray;"></div> </div> <div class="container" style="padding:10px; left:100px; top:0px"> <div class="topleft box"></div> <div class="topright box"></div> <div class="bottomright box"></div> <div class="bottomleft box"></div> <div style="width:100%; height:100%; background: gray;"></div> </div> </body>