Zweispaltiges Layout (ohne Tabelle!)

In diesem Tutorial möchte ich erklären, wie man ein Layout macht, bei dem man links und rechts eine Spalte hat, in die man seinen Text schreibt.

Erstmal kurz zum Markup, das relativ einfach ist:
Html:
<div id="container">

   <div class="column left">
      <p>Inhalt der Linken spalte.</p>
   </div>

   <div class="column right">
      <p>Inhalt der rechten Spalte</p>
   </div>

   <br class="clearer" />

</div>


Wir haben einmal den umschließenden container. Der wäre so gesehen eigentlich nicht nötig. Doch die Tabelle, in die man auf der Knuddels-Homepage seinen Code schreibt, ist nur 600px breit. Der container erlaubt es uns, das Gerüst mit den zwei Spalten breiter als 600px zu machen.
Dann haben wir zwei Spalten (column). Eine ist linksfließend und die andere rechtfließend. Damit dieser Links- bzw. Rechtsfluss nach den Spalten aufhört, haben wir einen clearer.

Dann zum Stylesheet:

Html:
<style type="text/css"><!--
  #container {
      width: 800px; /* kann beliebig angepasst werden */
  }

  .column { width: 49%; }
  .left { float: left; }
  .right { float: right; }

  .clearer {
      clear: both;
      line-height: 0;
  }
--></style>


Im ersten Teilabschnitt geben wir dem container eine Breite von 800px. Die Bereite kann aber nach Bedarf angepasst werden. Anschließend weisen wir den beiden Spalten (column) eine Breite von 49% zu. Das heißt, dass sowohl die linke Spalte, als auch die rechte Spalte eine exakt 49% von 800px breit sind. Wer mitgedacht hat merkt, dass in der Mitte 2% platz sind. Diese 2% erzeugen einen kleinen Abstand zwischen den beiden Spalten, damit der Besucher wirklich direkt merkt, dass der Text nicht durchgeht. Dann geben wir jeder Spalte noch ihren Textfluss (jeweils nach links oder rechts). Dann bestimmen wir noch, dass unser clearer, der nach den Spalten den Textfluss stoppt, eine Höhe von 0 hat (ansonsten würde er einen Abstand erzeugen).

In den zwei Spalten habe ich als Beispiel jetzt einen Textabsatz (<p>Text</p>) verwendet. Natürlich kann man da auch Bilder, Überschriften, Zitate, Kästen usw. einfügen, es war lediglich ein Beispiel.

Zusammengefasst haben wir dann folgendes Gebilde im Quellcode:

Html:
<style type="text/css"><!--
  #container {
      width: 800px; /* kann beliebig angepasst werden */
  }

  .column { width: 49%; }
  .left { float: left; }
  .right { float: right; }

  .clearer {
      clear: both;
      line-height: 0;
  }
--></style>

<div id="container">

   <div class="column left">
      <p>Inhalt der Linken spalte.</p>
   </div>

   <div class="column right">
      <p>Inhalt der rechten Spalte</p>
   </div>

   <br class="clearer" />

</div>


Achtung: Ich habe jetzt zur Übersicht an diversen Stellen Zeilenumbrüche und Leerzeichen gemacht, damit der Code übersichtlich ist. Auf der Homepage müsst ihr ihn jedoch in eine Reihe schreiben, da sonst die automatischen Zeilenumbrüche eingesetzt werden.

Falls ihr etwas nicht verstanden habt, oder dieser Code bei euch nicht funktioniert, könnt ihr mich gerne im Chat per /m anschreiben. :-)

Kroko