Child div to 100% when parent's height is dynamical | HTML/CSS - height

Question

I want the image to be centered next to the text.The amount of text will be different in each box so I can't set the height.As I research people mainly use two ways of vertical centering.Using line-height which I can't use, because I don't have fixed height.Second one is using absolute positioning which I can't use, because left div with image inside will cover the text.If I set padding to text, when image is not there it won't look good.
The best I could think of is to use jQuery to get and set the container height, and then set the margin according to the height.
<div class="container">
<div class="image_holder">
<img src="http://blog.oxforddictionaries.com/wpcms/wp-content/uploads/cat-160x160.jpg" alt="cat" />
</div>
<p>text</p>
</div>
<style type="text/css">
.container {
width:600px;
overflow:hidden; }
.image_holder {
width:100px;
height:100%;
float:left;
background:#eaf0ff; }
p {
width:500px;
float:left; }
</style>
<script>
$('.container').css('height', $('.container').height() );
$('.image_holder').css('margin-top', ( $('.container').height() - $('.image_holder img').height() ) / 2 );
</script>
Is there a way to do it cleanly with pure CSS ?

Answer 1

The best solution I came up with is to absolutely position the picture inside the box and then use javascript to remove padding if there is no image in the box.