95 lines
2.1 KiB
HTML
95 lines
2.1 KiB
HTML
<!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>
|