Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

16.5 Dreispaltiges Layout mit entgegengesetzten Floats

Die Erweiterung von 2 auf 3 Spalten ist bei der Variante mit entgegengesetzten Floats etwas aufwendiger, denn Sie benötigen innerhalb des Textbereichs zwei div-Bereiche, die dann auch wieder nach links bzw. rechts gefloatet werden.

Zwei zusätzliche Bereiche im HTML einfügen

Der bisherige Inhalt steht dann in einem Bereich namens #inhalt, während der Bereich #sidebar zur dritten Spalte auf der rechten Seite wird und nur ein bisschen Fülltext erhält.

Die Reihenfolge der beiden Bereiche im Quelltext spielt keine Rolle, da sie wieder mit entgegengesetzten Floats positioniert werden.

ToDo: Das HTML für das dreispaltige Layout vorbereiten
  1. Ändern Sie die HTML-Struktur auf allen drei Webseiten wie folgt:

    <div id="wrapper">
    <div id="kopfbereich"> ...</div>
    <div id="textbereich">

    <div id="inhalt">
    <!-- Bisheriger Inhalt aus #textbereich -->
    </div> <!-- Ende inhalt -->

    <div id="sidebar">
    <h2>#sidebar</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Suspendisse egestas ultricies pede.</p>
    </div>
    <!-- Ende sidebar -->

    </div> <!-- Ende #textbereich -->

    <div id="navibereich"> ...</div>
    <div id="fussbereich"> ...</div>
    </div>

  2. Speichern Sie die Webseiten und betrachten Sie sie im Browser.

Die beiden neuen Spalten im CSS gestalten

Jetzt werden die beiden neuen Spalten im CSS gestaltet. Der Textbereich hat eine Breite von 590px (inklusive 30px padding), die Sie im Stylesheet zwischen den beiden neuen Bereichen beliebig aufteilen können.

Die Hintergrundfarbe für die dritte Spalte wird wieder durch die #wrapper zugewiesene Hintergrundgrafik farbverlauf_dreispaltig.jpg erzeugt.

  1. Ändern Sie ggf. die Hintergrundgrafik für #wrapper:
    #wrapper {
      color: black;
      background: white url(farbverlauf_dreispaltig.jpg) repeat-y;
      width: 720px;
      margin: 10px auto;
    }
  2. Entfernen Sie das padding von #textbereich und verbreitern Sie ihn auf 590px.
    #textbereich {
      float: right;
      width: 590px;
    }
  3. Ergänzen Sie die folgenden Styles in bildschirm.css wie folgt, am besten nach den Styles für den #textbereich:
    #inhalt {
      float: left;
      width: 430px;
      padding: 20px 10px 20px 20px;
    }
    #sidebar {
      float: right;
      width: 110px;
      padding: 10px;
    }
  4. Speichern Sie das Stylesheet und betrachten Sie die Webseiten im Browser.

Im Browser sieht das dann so aus:

Abbildung 16.14: Drei-Spalten- Layout mit doppeltem float:left und float:right
Abbildung 16.14: Drei-Spalten- Layout mit doppeltem float:left und float:right