Vertically align 2 floating divs with flexible height - css

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/

Answer 2

Here you go, just change the margin-top value in the left column, and all should be good. If you want more content in that column, add some padding-top too. Here is the changed css for it:
.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;
text-align: center;
border: 1px solid black;
margin:0;
}
.right {
margin-left:0;
height: 250px;
float: right;
margin-right: 1em;
}
.left {
float: left;
margin-top: 50px;
margin-left: 1.4em;
}