Link zu www.kneller-gifs.de

CSS: 2 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 und einer "Inhaltsbox" rechts 

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