015.html [plain text]

<!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>