title: Styling a Definition List (<dl>) with floating child elements
body: <p>There's a defintion list where a key-value-pair is supposed to be on one line. The definition starts right after the term, so the <code>&lt;dt&gt;</code>s do not have a fixed width. This actually works fine, using floating elements and I get some' like this:</p>
  <blockquote>
  <p><strong>Value:</strong> Definition 1</p>
  <p><strong>Value:</strong> Definition 2</p>
  <p><strong>Value:</strong> Definition 3</p>
  </blockquote>
  <p>The problem is, that the <code>&lt;dd&gt;</code>-element can get long and then it results in this:</p>
  <blockquote>
  <p><strong>Value:</strong> Definition 1</p>
  <p><strong>Value:</strong></p>
  <p>Defintion 2 is very very long.</p>
  <p><strong>Value:</strong> Definition 3</p>
  </blockquote>
  <p>But I want to get this actually:</p>
  <blockquote>
  <p><strong>Value:</strong> Definition 1</p>
  <p><strong>Value:</strong> Defintion 2</p>
  <p>is very very long.</p>
  <p><strong>Value:</strong> Definition 3</p>
  </blockquote>
  <p>I can't get my head around it. Maybe somebody has an idea.</p>
  <p>Here's a <a href="http://jsfiddle.net/CfuA8/" rel="nofollow noreferrer">demo on jsfiddle.net</a> and here the source:</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;dl&gt;
      &lt;dt&gt;Value 1:&lt;/dt&gt;
      &lt;dd&gt;Defintiion 1&lt;/dd&gt;
      
      &lt;dt&gt;V 2:&lt;/dt&gt;
      &lt;dd&gt;Defintiion 2&lt;/dd&gt;
      
      &lt;dt&gt;Value 3&lt;/dt&gt;
      &lt;dd&gt;Defintiion 3 is pretty long. So it breaks into a new line.&lt;/dd&gt;
      
      &lt;dt&gt;This length is not defined:&lt;/dt&gt;
      &lt;dd&gt;Defintiion 4&lt;/dd&gt;
      
      &lt;dt&gt;Last&lt;/dt&gt;
      &lt;dd&gt;Defintiion 5&lt;/dd&gt;
  &lt;/dl&gt;​
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>dl {
      width: 200px;
      border: 1px solid red;
  }
  
  dl &gt; dt {
      display: block;
      float: left;
      clear: both;
      margin: 0;
      padding: 0 5px 0 0;
      font-weight: bold;
  }
  
  dl &gt; dd {
      display: block;
      float: left;
      margin: 0;
      padding: 0;
  }​
  </code></pre>