<div id="head">
  <h1>Kopfzeile des Dokuments</h1>
  <p><a href="#">Haupt-Navigationspunkt 1</a>  |  <a href="#">Haupt-Navigationspunkt 2</a>  |  <a href="#">Haupt-Navigationspunkt 3</a></p>
</div>
<div id="nav">
  <div id="innerNavigation">
    <h2>Navigation</h2>
    <ul>
      <li><a href="#">Link eins</a></li>
      <li><a href="#">Link zwei</a></li>
      <li><a href="#">Link drei</a></li>
    </ul>
  </div>
</div>
<div id="content">
  <h2>Inhaltsbereich</h2>
  <h3>Erläuterungen zum Thema.</h3>
  <p>Hier wird jetzt ganz genau erklärt, was bei CSS zu beachten ist.
  Hier wird jetzt ganz genau erklärt, was bei CSS zu beachten ist.
  Hier wird jetzt ganz genau erklärt, was bei CSS zu beachten ist.
  Hier wird jetzt ganz genau erklärt, was bei CSS zu beachten ist.
  Hier wird jetzt ganz genau erklärt, was bei CSS zu beachten ist.
  Hier wird jetzt ganz genau erklärt, was bei CSS zu beachten ist.</p>
</div>
<div class="clearAll"></div>

#head {
  background-color: #F00;
  color: #000;
  padding: 10px;
}
#head h1 {
  font-size: 1.2em;
}
#head a {
  color: #000;
}
#nav {
  float: left;
  padding: 10px 0;
  width: 15em;
  background-color: #00F;
}
#innerNavigation {
  padding: 10px;
}
#nav, #nav a {
  font-weight: bold;
  color: #FFF;
}
#content {
  padding: 10px;
  margin-left: 15em;
  background-color: #FF0;
}
#nav h2, #content h2 {
  font-size: 1.1em;
}
#content h3 {
  font-size: 1.05em;
}
.clearAll {
  clear: both;
}