title: How to position div below another div
body: <p>I have two div's:</p>
  
  <pre><code>&lt;div&gt;&lt;label for="1"&gt;Some really loooong text... Which breaks the second div. Which then appears shifted to the right.&lt;/label&gt;&lt;input type="text" id="1" name"1"&gt;&lt;/div&gt;
  &lt;div&gt;&lt;label for="2"&gt;Shifted.&lt;/label&gt;&lt;input type="text" id="2" name"2"&gt;
  </code></pre>
  
  <p>I use the following css to float the label left of the input text field:</p>
  
  <pre><code>label{
      width:200px;
      float:left;
  }​
  </code></pre>
  
  <p>The second div shifts to the left instead of appearing below the first one. It should be aligned to the left as the first one.</p>
  
  <p>Here is the example: <a href="http://jsfiddle.net/qh37Y/" rel="noreferrer">http://jsfiddle.net/qh37Y/</a></p>
  
  <p>Now if I insert a <em>clear:both;</em> div it works, but is this best practice?</p>
  
  <pre><code>.clearer {
      clear:both;
  }
  &lt;div class="clearer"&gt;&lt;label for="2"&gt;Shifted.&lt;/label&gt;&lt;input type="text" id="2" name"2"&gt;​
  </code></pre>
  
  <p>See here: <a href="http://jsfiddle.net/ywUx6/" rel="noreferrer">http://jsfiddle.net/ywUx6/</a></p>