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