Link zu www.kneller-gifs.de

CSS: 3 Spalten Layout

Das alte Tabellenlayout ist out, jetzt ist ein CSS-Layout in.

Am Anfang ist die Umstellung für den einen oder anderen etwas schwer, deshalb biete ich hier ein simples Grundgerüst an.

Eine HTML-Datei mit einer "Navigationsbox" links, einem "Inhaltsbereich" in der Mitte und einem dritten Bereich rechts.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>3 Spalten Layout</title>
  <style TYPE="text/css">
  <!--
    body {
      margin:0; padding:0; }
    #links {
      float:left; width:12em; border:1px solid #f00; height:100%; }
    #rechts {
      float:right; width:12em; border:1px solid #0f0; height:100%; }
    #inhalt {
      margin-left:12em; margin-right:12em; border:1px solid #00f; height:100%; }
    /* ohne height:100% verrutscht der linksbündige text im rechten div im IE !!! */
  -->
  </style>
</head>
<body>
  <div id="links">
    Text links<br>
    links<br>
    links
  </div>
  <div id="rechts">
    Text rechts<br>
    rechts<br>
    rechts
  </div>
  <div id="inhalt">
    Text mitte<br>
    mitte<br>
    mitte<br>
    mitte<br>
    mitte<br>
    mitte
  </div>
</body>
</html>