title: Left-justifying text under image with max-width:100%
body: <p>I'd like the text under this image to be left justified under the image ('my title' to be aligned with the left side of the image), no matter what it's height, <em>without</em> Javascript.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="img-container"&gt;
          &lt;img src="http://img.thesun.co.uk/multimedia/archive/01572/empire-state-build_1572000a.jpg"/&gt;
  
          &lt;div class="info"&gt;
              &lt;h1&gt;my title&lt;/h1&gt;
              &lt;p&gt; my description&lt;/p&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.container{
      width:900px;
      position:relative;
  }
  
  .img-container{
      text-align:center;
  }
  
  img{
      max-width:100%;
  }
  
  .info{
      text-align:left;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/NGwdc/" rel="nofollow">http://jsfiddle.net/NGwdc/</a></p>
  
  <p>If you adjust .container width, it should always be aligned to the left side of that image.</p>
  
  <p>Is this possible with only CSS?</p>