| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Positioned elements</title> |
| <style> |
| .region { |
| 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="region bordered big-square float"> |
| <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,</p> |
| </div> |
| </div> |
| |
| <div class="region bordered square float"> |
| <div class="flow"> |
| <p>assumenda aperiam reprehenderit magni eaque autem ducimus earum.</p> |
| </div> |
| </div> |
| </body> |
| </html> |
