Beispiel:CSS2 min-max-width.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Breitenangaben</title>
<style>
html, body {
width: 100%;
margin: 0;
padding: 0;
}
html {
min-width: 50em;
}
div {
height: 10em;
width: 50%;
background-color: khaki;
margin: 1em auto;
}
p:first-child {
text-align: center;
}
code {
display: block;
}
.min_20 {
min-width: 20em;
}
.max_20 {
max-width: 20em;
}
#vergleich {
width: 20em;
height: 2em;
line-height: 2em;
}
section {
background-color: lightblue;
border: thin solid darkblue;
overflow: auto; /* muss gesetzt werden! */
resize: both;
margin: 0 1em;
}
</style>
</head>
<body>
<h1>min-width und max-width im Vergleich</h1>
<section>
<div class="min_20">
<p><code>min-width: 20em;</code><code>width: 50%;</code></p>
<p>Dieser Absatz soll halb so breit wie sein Elternelement sein, jedoch nicht schmaler als 20em werden.
Probieren Sie es aus, indem Sie die Breite der blauen section verändern.</p>
</div>
<div id="vergleich">
<p>Zum Vergleich: Diese Box ist 20em breit.</p>
</div>
<div class="max_20">
<p><code>width: 50%;</code><code>max-width: 20em;</code></p>
<p>Dieser Absatz soll halb so breit wie sein Elternelement sein, jedoch nicht breiter als 20em werden.
Probieren Sie es aus, indem Sie die Breite der blauen section verändern.</p>
</div>
</section>
</body>
</html>
