1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html>
<html>
<head>
<title>Test min-width and max-width CSS properties</title>
<style>
body {margin: 20px}
.test {min-width: 400px; max-width: 600px; background: lightgray}
.min {width: 400px; background: lightgreen}
.max {width: 600px; background: lightgreen}
</style>
</head>
<body>
<div class="background:lightblue">
<div class="min">
<p>By resizing the window, the content below in gray should stay
within the limits of minimum and maximum width.</p>
<p>Minimum width 400 px</p>
</div>
<div class="test">
<p>This is a rather long text to increase the maximal paragraph
width. Sed ut perspiciatis, unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam
eaque ipsa, quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem,
quia voluptas sit, aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos, qui ratione voluptatem sequi
nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor
sit, amet, consectetur, adipisci velit, sed quia non numquam eius
modi tempora incidunt, ut labore et dolore magnam aliquam quaerat
voluptatem. ut enim ad minima veniam, quis nostrum exercitationem
ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
consequatur?</p>
</div>
<div class="max"><p>Maximum width 600 px</p></div>
</div>
</body>
</html>
|
