title: Container div doesn't surround it's floating child elements. How can I fix this?
body: <p>I've a XHTML structure like this:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8" ?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"&gt;
  &lt;head&gt;
  &lt;title&gt;Titel&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="Seite" class="bgr"&gt;
  &lt;div id="Titel" class="bgr"&gt;
  &lt;h1&gt;some titel&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div id="Mitte" class="bgr"&gt;
  &lt;div id="Navigation" class="bgr"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="link.html" class="aktiv"&gt;&lt;img src="text.gif" alt="[Link]" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="Inhalt" class="uebersicht bgr"&gt;
  Content
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="Fusszeile" class="bgr"&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>"Titel" and "Fusszeile" are both block elements (<code>display:block;</code>). The additional container div "Mitte" is mainly there for margin/padding and background image reasons. The CSS for "Navigation" and "Inhalt" looks like this:</p>
  
  <pre><code>div#Navigation {
  float: left;
  }
  
  div#Inhalt {
  margin: 0 0 1em 185px;
  padding: 0 1em;
  }
  </code></pre>
  
  <p>The result is that the floating navigation list sticks out of the "Mitte" div. How can I fix this?</p>