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