title: Inline-Block div elements do not line up as expected
body: <p>I have some HTML and CSS that creates inline block elements (divs) that one might find on a landing page.  However, they only appear to be vertically aligned correctly when they contain some content (an unordered list) inside the divs.  If there is no content in the div, the element get pushed down.  Here is a <a href="http://jsfiddle.net/f9Typ/">jsfiddle</a>.  Here is the code.  Can anybody explain why the third div block is not vertically aligned?</p>
  
  <p><strong>EDIT</strong>:  While I'm comfortable that the "fix" to this issue is to ensure that each div uses "vertical-align:top" in the styling, I'm still a little puzzled as to <em>why</em> I'm required to use this styling in the first place.  I would think that the div elements would always line up evenly, regardless of the content inside the divs.</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
  &lt;style type="text/css"&gt;
      body {
          font-family: Helvetica;
      }
  
      h1 {
          margin: 0px;
          padding: 10px;
          font-weight: bold;
          border-bottom: 1px solid #aaaaaa;
          font-size: 12px;
      }
  
      a {
          text-decoration: none;
      }
  
      ul {
          padding-left: 20px;
      }
  
      li {
          list-style-type: none;
          font-size: 12px;
      }
  
      .landing-block {
          display: inline-block;
          background-color: #eeeeee;
          margin-right: 30px;
          width: 192px;
          height: 140px;
          border: 1px solid #aaaaaa;
          -moz-box-shadow: 3px 3px 5px #535353;
          -webkit-box-shadow: 3px 3px 5px #535353;
          box-shadow: 3px 3px 5px #535353;
      }
  
      .header {
          padding: 10px;
          background-color: red;
          border-bottom: 1px solid #aaaaaa;
          color: #ffffff;
      }
  
      a:hover {
          text-decoration:underline; 
      }
  
      h1 &gt; a {
          color: #ffffff;
      }
  
      h1 &gt; a:hover { 
          color:#ffffff;
      }
  
      li &gt; a {
          color: #000000;
      }
  
      li &gt; a:hover { 
          color: #000000;
      }
     &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div&gt;
          &lt;div class='landing-block'&gt;
              &lt;h1 style='background-color: #3991db;'&gt;
                  &lt;a href='#'&gt;COMPANIES&lt;/a&gt;
              &lt;/h1&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href='#'&gt;Search Companies&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href='#'&gt;New Company&lt;/a&gt;&lt;/li&gt;
              &lt;ul&gt;
          &lt;/div&gt;
          &lt;div class='landing-block'&gt;
              &lt;h1 style='background-color: #9139db;'&gt;
                  &lt;a href='#'&gt;PEOPLE&lt;/a&gt;
              &lt;/h1&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href='#'&gt;Search People&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href='#'&gt;New Person&lt;/a&gt;&lt;/li&gt;
              &lt;ul&gt;
          &lt;/div&gt;
          &lt;div class='landing-block'&gt;
              &lt;h1 style='background-color: #c2db39;'&gt;
                  &lt;a href='#'&gt;Products&lt;/a&gt;
              &lt;/h1&gt;
          &lt;/div&gt;
      &lt;div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>