<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Minimum and Maximum Widths</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="copyright" href="/~dbaron/legal.html">
<style type="text/css">
.test {
border: medium solid purple;
padding: 0;
margin: 0;
}
.one {
width: 40%;
}
.two {
width: 30%;
min-width: 40%;
max-width: 30%;
}
.three {
width: 50%;
min-width: 40%;
max-width: 30%;
}
.four {
width: 50%;
max-width: 40%;
}
.five {
max-width: 60%;
width: 40%;
}
.six {
width: 30%;
min-width: 40%;
}
.seven {
min-width: 20%;
width: 40%;
}
.eight {
width: auto;
margin: 0 70% 0 0;
min-width: 40%;
}
.nine {
max-width: 40%;
}
</style>
</head>
<body>
<h1>Minimum and Maximum Widths</h1>
<div class="test">This <code>div</code> should have a medium solid purple
border, as should all the rest.</div>
<div class="test one">This <code>div</code> should have a width of 40%. This is a reference <code>div</code> and should work as long as <code>width</code> works.</div>
<div class="test two">This <code>div</code> should have a width of 40%.</div>
<div class="test three">This <code>div</code> should have a width of 40%.</div>
<div class="test four">This <code>div</code> should have a width of 40%.</div>
<div class="test five">This <code>div</code> should have a width of 40%.</div>
<div class="test six">This <code>div</code> should have a width of 40%.</div>
<div class="test seven">This <code>div</code> should have a width of 40%.</div>
<div class="test eight">This <code>div</code> should have a width of 40%.</div>
<div class="test nine">This <code>div</code> should have a width of 40%.</div>
<p>If the browser does not support <code>min-width</code> and
<code>max-width</code>, then the widths should be <code>auto</code>,
<code>40%</code>, <code>30%</code>, <code>50%</code>, <code>50%</code>,
<code>40%</code>, <code>30%</code>, <code>40%</code>, <code>auto</code>
(with 70% margin-right), and <code>auto</code>.</p>
</body></html>