Vertically align middle without knowing the height

Question

<div class="grid-960">
    <div class="row content">
        <div class="col col-6-12">
            <img src="imgs/image.jpg" alt="img"/>
        </div>
        <div class="col col-6-12 last">
            <h2>Title1</h2>
            <p>My content</p>
        </div>
    </div>
</div>

My problem:

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.

I am working with a floated element, and I don't know the height of it(dynamic content).

.col{float:left}

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.

Any ideas?

*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.

Answer 1

You could still use vertical-align: middle and display: table-cell if you wrap your .cols within two DIVs that use table display mode.

.wrap-1{
  display: table;
  min-height: 100%;   /* extend table height to min. 100% of the floated elm. */
}

.wrap-2{
  display: table-row;
}

.col{
  display: table-cell;
  vertical-align: middle;
}

And another way, using flexboxes:

.row{
  float:left; 

  display: -webkit-flex;    
  display: -ms-flexbox;
  display: flex;

  -webkit-align-items: center;    
  -ms-flex-align: center;
  align-items: center;   
}