| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Positioned elements</title> | |
| <style> | |
| .flow { | |
| -webkit-flow-into: f; | |
| } | |
| .region { | |
| -webkit-flow-from: f; | |
| margin: 25px; | |
| } | |
| .square { | |
| width: 100px; | |
| height: 100px; | |
| } | |
| .big-square { | |
| width: 150px; | |
| height: 150px; | |
| } | |
| .bordered { | |
| border: 2px dashed red; | |
| } | |
| .float { | |
| float: left; | |
| } | |
| .flow p { | |
| position: relative; | |
| top: 16px; | |
| right: 10px; | |
| margin: 0; | |
| font-size: 16px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="flow"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, repellat non rerum sit nobis in! Molestias, cumque architecto commodi nam similique? Maiores, assumenda aperiam reprehenderit magni eaque autem ducimus earum.</p> | |
| </div> | |
| <div class="region bordered big-square float"></div> | |
| <div class="region bordered square float"></div> | |
| </body> | |
| </html> |