title: DIV not adjusted to text height. Why?
body: <p>Do you know why my text is cut vertically?  I would expect the <code>&lt;div&gt;</code> to adjust its height to the text's height. Thanks.</p>
  
  <p><a href="http://jsfiddle.net/6LdfQ/" rel="nofollow">http://jsfiddle.net/6LdfQ/</a></p>
  
  <pre><code>&lt;div class="wrapper"&gt;
  &lt;div class="block-left bigtext"&gt;left&lt;/div&gt;
  &lt;div class="block-right"&gt;right&lt;/div&gt;
  &lt;/div&gt;
  
  .bigtext {
      color: #333;
      font-weight: 600;
      font-size: 53px;
      line-height: 12px;
      text-align: right;
  }
  
  .wrapper {
      position: relative;
      display: block;
      margin-right: auto;
      margin-left: auto;
      width: 980px;
      overflow: hidden;
      background:red;
  
  }   
  
  .block-left {
      float: left;
      box-sizing: border-box;
      padding-right: 20px;
      width: 50%;
  
  }
  .block-right {
      float: right;
      box-sizing: border-box;
      width: 50%;
  
  }
  </code></pre>