Vorgehensweise

Das alles umschließende Element #wrap bekommt eine feste Breite und ein Hintergrundbild. Dieses passend platzierte und vertikal gekachelte Hintergrundbild bildet die optisch durchlaufende Randspalte.

Die Randspalte wird per float auf die gewünschte Seite gesetzt. Die Randspalte selbst ist immer nur so hoch wie ihr Inhalt; die vollständige Höhe wird nur vorgetäuscht.

Diese Technik ist bekannt als faux columns – unechte Spalten.

Minimales CSS

  1. * {
  2. margin:0;
  3. padding:0;
  4. }
  5.  
  6. #wrap {
  7. width:720px;
  8. margin:0 auto;
  9. background-color:#fff;
  10. background-image:url(img/sidebar.gif);
  11. background-position:right top;
  12. background-repeat:repeat-y;
  13. }
  14.  
  15. #sidebar {
  16. width:200px;
  17. float:right;
  18. background-color:#ccc;
  19. }
  20. #content {
  21. margin-right:220px;
  22. }
  23.  
  24. #footer {
  25. clear:left;
  26. }

Minimales HTML

  1. <div id="wrap">
  2. <div id="header">
  3. </div>
  4. <div id="main">
  5. <div id="sidebar">
  6. </div>
  7. <div id="content">
  8. </div>
  9. </div>
  10. <div id="footer">
  11. </div>
  12. </div>