Vorgehensweise

Das alles umschließende Element #wrap bekommt keine feste Breite sondern nur einen leichten Randabstand. Dieses Elemetn passt sich somit der Breite des Viewports an.

Die Randspalte #sidebar steht in der Code-Reihenfolge vor dem Inhaltsbereich #content. #sidebar bekommt eine Breitenangabe und wird mit float auf die gewünschte Seite gebracht.

Der Bereich #content bekommt einen Randabstand mind. in der Breite der Randspalte.

Die Fußzeile #footer bekommt die clear-Eigenschaft (Richtung analog Randspalte) und sorgt so dafür, dass sich der umschließende #wrap auch um das gefloatete Element ausdehnt.

Minimales CSS

  1. * {
  2. margin:0;
  3. padding:0;
  4. }
  5.  
  6. #wrap {
  7. margin-left:5%;
  8. margin-right:5%;
  9. }
  10.  
  11. #sidebar {
  12. width:12em;
  13. float:left;
  14. background-color:#ccc;
  15. }
  16.  
  17. #content {
  18. margin-left:12em;
  19. }
  20.  
  21. #footer {
  22. clear:left;
  23. }

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>