<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .box{ height: 300px; 500px; } .left{ height: 300px; 300px; float: left; } .right{ height:300px; 180px; margin-left: 20px; float: left; } .right div{ 180px; height: 90px; background-color: red; } .left .head{ height: 200px; 300px; background-color: blue; } .left .bottom{ margin-top: 20px; height: 80px; 300px; } .bottom .left{ height: 80px; 145px; background-color: red; } .bottom .right{ margin-left: 10px; height: 80px; 145px; background-color: black; } </style> <body> <div class="box"> <div class="left"> <div class="head"> </div> <div class="bottom"> <div class="left"> </div> <div class="right"> </div> </div> </div> <div class="right"> <div style="margin-bottom:15px;"> </div> <div style="margin-bottom:15px;"> </div> <div> </div> </div> </div> </body> </html>