title: HTML Header With Image And Text - Align Text To Bottom?
body: <p>I am writing an HTML page with CSS. At the top of my page I want to show a header with an image and text (image to the left of the text). The image size is 64 x 64 pixels and I want the text to be large.</p>
  
  <p>I was able to do almost everything except I want to align the text at the bottom but, no matter what I do, I can't seem to get the text to stop placing itself at the top.</p>
  
  <p>Here is the HTML for my header:</p>
  
  <pre><code>&lt;div id="container" class="container"&gt;
      &lt;div class="header"&gt;
          &lt;div class="header image"&gt;&lt;/div&gt;
          &lt;div class="header text"&gt;Header Text&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is the CSS;</p>
  
  <pre><code>.container .header {
      height: 65px;
      border:2px solid red;
  }
  
  .container .header .image {
      background: url("../images/icon64.png") no-repeat;
      float: left;
      display: inline-block;
      width: 65px;
      border:2px solid green;
  }
  
  .container .header .text {
      float: left;
      display: inline-block;
      vertical-align: bottom;
      font-family: sans-serif;
      font-size: x-large;
      border:2px solid blue;
  }
  </code></pre>
  
  <p>I have been reading several web pages after searching for how to do this. I found one page that seemed pretty straight forward. They said you have to use <em>inline-block</em> for the <em>display</em> property in order for <em>vertical-align</em> to be honored.</p>
  
  <p>I changed my CSS to what you see above but that still did not work. Here is what my header looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/wjWEV.png" alt="Header"></p>
  
  <p>(Note the border coloring is just for visualizing what's going on.)</p>
  
  <p>Can anyone tell me what I am doing wrong and how to fix it so that my text is vertically aligned at the bottom?</p>
  
  <p>Thank you.</p>