title: DIVs not aligning top left and top right using CSS float
body: <p>Sorry a bit new to HTML and CSS but I have tried everything but i can't seem to get this to work. I have a top DIV and a bottom DIV. The top DIV contains two more DIVs that need to be aligned left and right.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
      &lt;div&gt;
          &lt;div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(187, 187, 187);"&gt;
              &lt;div style="font-size: 30px; float: left;"&gt;Top Left&lt;/div&gt;
              &lt;div style="font-size: 30px; float: right;"&gt;Top Right&lt;/div&gt;
          &lt;/div&gt;
          &lt;div &gt;blah blah blah blah blah blah blah blah blah blah blah
          blah blah blah blah blah blah blah blah blah blah blah blah
              blah blah blah blah blah blah blah blah blah blah blah blah
              blah blah blah
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I want to see something like :</p>
  
  <pre><code>Top Left                          Top Right
  -------------------------------------------
  
  blah blah blah blah blah blah blah 
  </code></pre>
  
  <p>But instead i get</p>
  
  <pre><code>----------------------------
  Top Left blah blah Top Right
  </code></pre>
  
  <p>It seems like the top DIV is getting its height set to zero. Why i have no idea. I thought if you put something in a DIV it should automatically stretch itself?</p>
  
  <p>My actual code is : </p>
  
  <pre><code>&lt;div style="border-bottom: 1px solid rgb(187, 187, 187); overflow: auto; clear: both; padding: 15px;"&gt;
      &lt;div style="font-size: 30px;"&gt;Bearbeiten&lt;/div&gt;
      &lt;div style="font-size: 30px; width: 50px;"&gt;X&lt;/div&gt;
  &lt;/div&gt;
  &lt;div style="position: absolute; bottom: 10px;"&gt;&lt;input style="font-size: 15px; height: 30px; width: 130px;"
                                                        value="Cancel" class="OverlayButton" id="Overlay.CancelButton"
                                                        type="button"&gt;&lt;input
          style="font-size: 15px; height: 30px; width: 130px;" value="Save" class="OverlayButton" type="button"&gt;&lt;input
          style="font-size: 15px; height: 30px; width: 130px;" value="Delete" class="OverlayButton" type="button"&gt;&lt;/div&gt;
  </code></pre>