NOTICE: This website is no longer updated or supported - as such many of the techniques used to build it may seem antiquated in the modern day. It is preserved for historical reasons only.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Max-Min Height and Width</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
<!--
#div1 {width: 50%;
 max-width: 300px;
 min-width: 150px;
 height: 50%;
 max-height: 500px;
 min-height: 100px;
 background-color: yellow;
 border-style: solid;
 border-width: 1px;
 overflow: hidden;}
h1 {text-align: center;}
-->
</style>
</head>
<body>

<div id="div1">
<h1>Div 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque placerat mauris sit amet quam. Nam semper, massa ac fringilla dignissim, erat erat venenatis felis, nec facilisis diam lorem eu diam. Vestibulum ultrices turpis at ante. Sed ultricies leo in enim. Nullam purus elit, luctus et, vulputate sit amet, pellentesque at, tellus. Integer in nunc eget elit commodo placerat. Etiam justo nisl, consectetuer non, blandit varius, aliquet et, velit. Etiam at quam in eros rhoncus blandit. Sed scelerisque scelerisque erat. Proin vitae felis eget lectus mattis sagittis. Morbi et risus. Aenean at nisl. Proin posuere, elit id commodo tincidunt, tortor est tristique magna, nec ornare tortor tortor ut velit. Cras laoreet mi a lectus.</p>
</div>

</body>
</html>

CLOSE WINDOW | VIEW RENDERED PAGE