csstdg5figs/10-floating-and-positioning/width-height-minmax.html at main · meyerweb/csstdg5figs · GitHub

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Setting a minimum width and height for a positioned element</title>
<style type="text/css">
div {color: rgba(0,0,0,0.5); font: bold italic x-large sans-serif; text-align: left;}
#contain {position: relative; background: rgba(0,128,216,0.33);
  height: 300px; width: 500px;}
#example {position: absolute; background: rgba(216,128,0,0.67);
	top: 10%; bottom: 20%; left: 50%; right: 10%;
	min-width: 10em; min-height: 20em;
}
</style>
</head>
<body>

<div id="contain">
containing<br>block
<div id="example">positioned element</div>
</div>

</body>
</html>