2-spaltige Darstellung mit umflossener Navigation, Inhalt zentriert auf dem Bildschirm

Ist im Prinzip so wie Variante 2, nur daß das wrapper-div noch zentriert wird und mit maximal-Breite versehen wird. Damit in jedem Fall etwas Abstand zum Rand gehalten wird, bekommt body ein padding.

html    {margin:0; padding:0; height:100%;}
body    {margin:0; padding:0 30px; height:100%;
         background:#FFF8DF;}
#wrapper{margin:0 auto; max-width:100ex;}
#head   {height:60px;}
#nav    {width:20ex; float:left; min-height:100%;}
#cont   {margin-left:20ex;  background: #FEFEFE;
         padding:1px 30px; border-left:2px solid #D5391F;}

<!--[if IE ]>
<style type="text/css">
#wrapper {height:100%;}
</style>
<![endif]-->

IE kann kein "max-width", deshalb bekommt er eine JavaScript-Krücke gereicht. Die erlaubt zwar nur Breitenangaben in px und nicht in relativen Größen wie ex oder em, aber es muß es tun. Was besseres gibts nicht für IE.

#wrapper {width:expression(document.body.clientWidth < 860 ? "780px":"auto" ) }

Achtung: min-with für IE funktioniert nicht in Kombination mit <pre>!
Testseite für IE ohne <pre>

Da außerdem IE margin:auto zum zentrieren von Block-Elementen nicht beherrscht, muß man noch ein paar zusätzliche Formatierungen einbauen: body bekommt text-align:center (eigentlich ungültig für Block-Elemente) und das wrapper-DIV wieder text-align:left.

<!--[if IE ]>
<style type="text/css">
body    {text-align:center;}
#wrapper{height:100%; text-align:left;}
</style>
<![endif]-->

Auch hier hat man den Effekt, daß kurze Seiten in FF und Opera nicht bildschirmfüllend dargestellt werden. Für die Schönheit kann man eine Mindesthöhe für #cont in em vorgeben; die 100% werden leider ignoriert.

#cont   {margin-left:20ex;  background: #FEFEFE; min-height:30em;
         padding:1px 30px; border-left:2px solid #D5391F;}

Seite mit langen Inhalt
Seite mit langer Navigation
Kurze Seite