title: Side-by-side divs with different height
body: <p>I have placed two divs next to each other, I have specified the same height for both but the second one appears to be higher than the first one. Why is this happening, they should have the same height but they aren't.</p>
  
  <pre><code>body {
      font-family: Arial, Helvetica, sans-serif;
      background : #CD8C95;
  }
  div {
      height:30em;
  }
  div#links {
      font-size:18px;
      font-family:Geneva, Arial, Helvetica, sans-serif;   
      background : #EEDD82;
      padding-top: 15%;
      padding-left: 10px;
      width : 12em;
      float:left;
  }
  div#content {
      padding-left: 5em;
      padding-top:10em;
      background:#FFA07A;
      float:left;
      width:20em;
  }
  </code></pre>