1<!doctype html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Positioned elements</title>
6 <style>
7 .region {
8 margin: 25px;
9 }
10
11 .square {
12 width: 100px;
13 height: 100px;
14 }
15
16 .big-square {
17 width: 150px;
18 height: 150px;
19 }
20
21 .bordered {
22 border: 2px dashed red;
23 }
24
25 .float {
26 float: left;
27 }
28
29 .flow p {
30 position: relative;
31 top: 16px;
32 right: 10px;
33 margin: 0;
34 font-size: 16px;
35 }
36 </style>
37</head>
38<body>
39 <div class="region bordered big-square float">
40 <div class="flow">
41 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, repellat non rerum sit nobis in! Molestias, cumque architecto commodi nam similique? Maiores,</p>
42 </div>
43 </div>
44
45 <div class="region bordered square float">
46 <div class="flow">
47 <p>assumenda aperiam reprehenderit magni eaque autem ducimus earum.</p>
48 </div>
49 </div>
50</body>
51</html>