Navigationsleisten

Die Konstruktion dieser "dynamischen" Navigationsleiste ist ebenso einfach wie simpel.

.content {
  border-style:solid;
  border-color:#336699;
  border-width:0px 0px 0px 220px;
  padding-left:20px;
  }

 

liefert ein <div> mit einem 220px breiten linken Rand. Der (was sollte er sonst auch tun) mit dem Inhalt mitwächst.

Die Navigation wird innerhalb dieser border absolut positioniert:

.navigation {
  position:absolute;
  left:20px;
  top:30px;
  width:200px;
  }


Nachteil: Die Breite (hier: 220 Pixel) der Navigation ist absolut vorgegeben. Nicht alle Browser vertragen an dieser Stelle eine prozentuale Breite.
Der Inhalt muss mindestens so hoch wie die Navigation sein.