Du bist aber böse. Das ist auch nicht sinnvoll.
Warum müssen sie feste Breite haben? Auf einem modernen Browser hat praktisch nur noch der Bildschirm eine feste Breite.
die linke Spalte enthält nur eine "schmückende" Grafik. die hat ne feste Breite.
für die rechte, die Inhaltsspalte wird auch eine feste Breite gewünscht, da das Verhältnis zu einer im rechten Container liegenden Grafik fix sein soll.
Moderne Browser skalen doch trotzdem mitsamt den Bilderen hoch.
Was mir alternativ auch gefallen würde wäre, dass die Linke Spalte mit der Grafik schmaler wird, wenn der Platz nicht reicht.
habe hier mal min-width:10px versucht (Beispielcode unten), das wirkt aber nicht.
Mir ist das ganz width Modell nicht ganz klar. Wann wird denn ein Element auf seine min-Größe reduziert.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
#container { width:1200px; min-height:20px; background:grey; text-align:left; border:3px solid black; }
#rechts { float:left; width:780px; background:yellow; }
#links { float:left; min-width:10px; width:380px; background:red; overflow:hidden;}
#content { color:#494949; margin-left:4px; width:776px; overflow:hidden; min-height:700px; background:green; }
#footer { overflow:hidden; background:#587DBE; color:white; font-size:12px; height:17px; margin-left:10px; width:780px; text-align:right; }
</style>
<title>Floattest</title>
</head>
<body>
<div id='links'>
<p>Links</p><p>Links</p><p>Links</p><p>Links</p><p>Links</p>
</div> <!-- links -->
<div id='rechts'>
<div id='content'>
<p>Some Text rechts</p><p>Some Text rechts</p><p>Some Text rechts</p>
</div> <!-- content -->
<!-- <div id="footer">Footer</div> -->
</div> <!-- rechts -->
<div id='links'>
<p>Links</p><p>Links</p><p>Links</p><p>Links</p><p>Links</p>
</div> <!-- links -->
</body>
</html>