Vertically align 2 floating divs with flexible height

Question

I'm trying to figure out how to align 2 floating divs vertically. Each of the divs has a flexible height.

Here is what i have so far: http://jsfiddle.net/VLRpc/1/

 <div class="section">
    <div class="container">
        <div class="wrap">
            <div class="column left">
                <h1>Software</h1>
                <p>I use many software applications to achieve the best results.</p>
            </div>
            <div class="column right"></div>
        </div><!-- end wrap -->
</div><!-- end container -->
</div><!-- end section -->

.container {
width: 100%;
height: 100%;
display: table;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
}
.wrap {
vertical-align: middle;
display: table-cell;
padding: 0;
margin: 0;
border: 1px solid red;
}

/* Columns */
.column {
width: 45%;
height: auto;
float:left;
text-align: center;
border: 1px solid black;
}
.right {
margin-left:0;
height: 250px
}
.left {
margin-left:5%;
}

However the div on the left gets pushed to the top of the larger div which is on the right. I need both of these divs to be vertically centered.

Any ideas?

Answer 1

Here's how you could make it flexible (no fixed heights, just keep those .column containers vertically centered regardless of their content): set .column to display:inline-block and to vertical-align: middle inside your table-cell .wrap div.

.column {
    display: inline-block;
    width: 45%;
    height: auto;
    text-align: center;
    border: 1px solid black;
    vertical-align: middle;
}

http://jsfiddle.net/VLRpc/2/