| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| |
| <head> |
| |
| <title>CSS Test: Margin collapsing with clearance - margins of a 'collapsed through' box with clearance do not collapse with parent block's bottom margin</title> |
| |
| <style type="text/css"> |
| |
| #parent-red |
| { |
| background-color: yellow; |
| border-top: black solid 1px; |
| width: 50%; |
| height: 151px; |
| } |
| #parent-lime |
| { |
| background-color: lime; |
| border-top: black solid 1px; |
| width: 100%; |
| } |
| |
| #float-left-blue |
| { |
| background-color: lime; |
| float: left; |
| height: 100px; |
| width: 100px; |
| } |
| |
| #clear-left |
| { |
| clear: left; |
| margin-top: 10px; |
| margin-bottom: 10px; |
| } |
| |
| #other |
| { |
| height: 30px; |
| margin-bottom: 20px; |
| } |
| |
| </style> |
| |
| </head> |
| |
| <body> |
| |
| <p>Test passes if there is a yellow rectangle below the lime rectangle.</p> |
| |
| <div id="parent-red"> |
| <div id="parent-lime"> |
| <div id="float-left-blue"></div> |
| <div id="clear-left"></div> |
| <div id="other"></div> |
| </div> |
| </div> |
| </body> |
| </html> |
