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