title: divs overlap paragraph text
body: <p>I have an HTML structure like this:</p>
  
  <pre><code>&lt;div&gt;
      &lt;div style="position:relative;"&gt;
          &lt;div style="position:absolute;float:left;top:0;left:0;width:50px;"&gt;57&lt;/div&gt;
          &lt;div style="width:550px;position:absolute;float:left;top:0;left:50px;"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ipsum eu justo ornare euismod. Suspendisse bibendum venenatis nisl, ut blandit odio aliquet sit amet. Donec ultricies purus eu metus faucibus venenatis. Donec imperdiet sagittis pretium. Quisque pellentesque malesuada eros sit amet fringilla. Cras egestas vehicula pharetra. Nunc mattis aliquam erat pharetra tempus. Sed magna dui, facilisis nec pharetra dignissim, lobortis vel nulla. Etiam tellus dui, dapibus sit amet sodales vitae, tempus eu felis. Nam interdum sagittis libero, nec sagittis nisl dapibus et. Nulla facilisi.&lt;/div&gt;
      &lt;/div&gt;&lt;br /&gt;&lt;br /&gt;
  
      &lt;p style="margin-left:50px;"&gt;This is my paragraph&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see from <a href="http://jsfiddle.net/tSYvB/" rel="nofollow"><strong>THIS FIDDLE</strong></a>, My Lorem Ipsum text overlaps with my paragraph. I tried putting somme <code>&lt;br /&gt;</code> between my div and my paragraph, but they still overlap. I want my paragraph to appear after my text. Any help please?</p>
  
  <p>Thank you</p>