title: Vertically align middle without knowing the height
body: <pre><code>&lt;div class="grid-960"&gt;
      &lt;div class="row content"&gt;
          &lt;div class="col col-6-12"&gt;
              &lt;img src="imgs/image.jpg" alt="img"/&gt;
          &lt;/div&gt;
          &lt;div class="col col-6-12 last"&gt;
              &lt;h2&gt;Title1&lt;/h2&gt;
              &lt;p&gt;My content&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My problem:</p>
  
  <p>Yes I know how to vertically align most content. I've used many techniques, for example setting the parent as table and the child as table-cell. However most techniques requires me to either know the height of the parent/child - or they assume you are working with a block element.</p>
  
  <p>I am working with a floated element, and I don't know the height of it(dynamic content).</p>
  
  <pre><code>.col{float:left}
  </code></pre>
  
  <p>Basically I need the elements on the right col vertically align with the image on the left.
  Because my columns float left, 100% height will have no effect.</p>
  
  <p>Any ideas?</p>
  
  <p>*By the way, I am not sure why my code never display's correctly here. I can't seem to get the indents to work.</p>