<html> <head> <style type = "text/css"> #float { float: left; width: 300px; height: 500px; background: blue; } #float1 { float: left; width: 500px; height: 75px; background: red; } #float3 { float: left; width: 200px; height: 100px; background: red; } #float2 { float: right; width: 100px; height: 50px; background: green; } #float4 { float: right; width: 100px; height: 250px; background: green; } #float5 { float: left; width: 300px; height: 100px; background: yellow; } #outer { padding: 100px; height: 250px; background: gray; } #firstouter { height: 100px; } </style> </head> <body> <div id = "firstouter"> <div id = "float"></div> </div> <div id = "outer"> <div id = "float1"></div> <div id = "float2"></div> <div id = "float3"></div> <div id = "float4"></div> </div> <div id = "float5"></div> </body> </html>