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