title: vertical-align: bottom; don't work with a display: inline-block; element
body: <p>First, my HTML markup:</p>
  
  <pre><code>&lt;nav&gt;
    &lt;section class="navabout"&gt;
      ABOUT
    &lt;/section&gt;&lt;section class="navphotography"&gt;
    PHOTOGRAPHY
    &lt;/section&gt;&lt;section class="navdesign"&gt;
    DESIGN
    &lt;/section&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>And my CSS code for it:</p>
  
  <pre><code>nav{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }
  nav &gt; section{
      width: 33%;
      height: 100%;
      display:inline-block; /*http://stackoverflow.com/q/11805352/1584286*/
  
      font-size: 60px;
      font-family: 'Bebas Neue', arial, helvetica, sans-serif;
  }
  
  nav &gt; section.navabout{
      background: url(http://eofdreams.com/data_images/dreams/face/face-01.jpg) no-repeat center; 
      background-size: cover;
  
      text-align: left;
  }
  nav &gt; section.navphotography{
      background: url(http://www.digitaltrends.com/wp-content/uploads/2010/02/digital-camera-buying-guide-header.jpg) no-repeat center; 
      background-size: cover;
  
      text-align: center;
      vertical-align: text-bottom;
  }
  nav &gt; section.navdesign{
      background: url(http://media.peugeot.com/images/backgrounds/design/concept-peugeot-design-lab.jpg) no-repeat center; 
      background-size: cover;
  
      text-align: right;
  }
  </code></pre>
  
  <p><strong>Question</strong></p>
  
  <p>I want the <em>Photography</em> font stick at the bottom of the section. So I found the CSS code <code>vertical-align</code> and read <a href="http://css-tricks.com/almanac/properties/v/vertical-align/" rel="nofollow">this</a> article by CSS-Tricks. There is written the following:</p>
  
  <blockquote>
    <p>In order for this to work, the elements need to be set alone a baseline. As in, inline (e.g. , ) or inline-block (e.g. as set by the display property) elements.</p>
  </blockquote>
  
  <p>So it should work in my code, then CSS-Tricks also say:</p>
  
  <blockquote>
    <p><code>text-bottom</code> - Aligns the bottom of the element with the bottom of the parent element's font.</p>
  </blockquote>
  
  <p>But strangely, the other two sections' font are sticking to the bottom WITH the background image (so the whole section tag sticks to the bottom). </p>
  
  <p>I thought, maybe it won't work because of the parent element font. So I set the value to <code>bottom</code>. But now nothing changed. </p>
  
  <p>Can you help me to let the font of the Photography section stick to the bottom (only the font!) </p>
  
  <p>PS: and yes I know, this CSS won't work in IE6 &amp; 7, but my whole site will only work in modern browsers.</p>
  
  <p><a href="http://codepen.io/anon/pen/vxldj" rel="nofollow">Codepen Demo for you</a></p>