<html> <head> <style> body { margin: 0px; padding: 0px; } #logo { background-color: green; border-top: 1px solid white; } h1 { margin-top: 50px; margin-bottom: 50px; padding-top: 20px; padding-bottom: 20px; font-size: 220%; color: white; } ul { margin: 0; padding: 0; } li { float:left; border: 2px solid blue; display: block; margin: 0px; } </style> </head> <body> <div id="logo"> <h1 style="height:30px"></h1> <div> <ul> <li>There should be a gap between this float and the green rectangle above. </ul> </div> </div> <div style="margin-top:100px;background-color:#dddddd; border:2px solid black"> <div style="float:left;width:2em;height:2em;background-color:white"></div> <div style="clear:both;margin-top:1em;margin-bottom:1em"></div> This text should be inside a black rectangle and below the 2em white square. </div> <div style="margin-top:1em;background-color:#dddddd; border:2px solid black"> <div style="float:left;width:2em;height:2em;background-color:white"></div> <div style="clear:both;margin-top:-1em;margin-bottom:1em"></div> This text should also be inside a black rectangle and below the 2em white square. </div>