| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
| <head> |
| <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
| <title>Clearing bug</title> |
| <style type="text/css"> |
| div {padding: 20px;} |
| #number1 {float:right;background-color:#c66;} |
| #number2 {clear:right;float:right;background-color:#9c6;} |
| #number3 {float:left;background-color:#69f;} |
| </style> |
| </head> |
| <body> |
| <div id="number1">DIV NUMBER 1: float:right;</div> |
| <div id="number2">DIV NUMBER 2: clear:right; float:right;</div> |
| <div id="number3">DIV NUMBER 3: float:left;</div> |
| <p>The first element is floated to the right. The second element clears the right float and also floats right. The third element is floated to the left, but is forced below the bottom of the first element. Yet, somehow this paragraph comes at the end of the markup, and manages to rise to the top of the page. This behavior is present in Firefox, Safari and Opera. <a href="http://level39.com/clearing-bug/layout.html"><strong>Click here for a real world example of this bug.</strong></a></p> |
| </body> |
| </html> |
