How do I make floated elements resize correctly

How do I make floated elements resize correctly

I have been trying to figure this out for a while and everything I try
fails to produce the result I am after.
So the setup is as follows
HTML
<div class="container">
<div class="icon-holder">
<img
src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png"
class="icon"/>
</div>
<div class="icon-holder">
<img
src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png"
class="icon"/>
</div>
<div class="icon-holder">
<img
src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png"
class="icon"/>
</div>
<div class="icon-holder">
<img
src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png"
class="icon"/>
</div>
<div class="icon-holder">
<img
src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png"
class="icon"/>
</div>
</div>
CSS
.icon-holder {
float:left;
height:100%;
width:auto;
}
.container {
height:100px;
}
.icon {
height:auto;
width: auto;
max-height: 100%;
display:block;
}
.container-before {
height:100px;
}
.container-after {
height:20px;
}
Now the problem lies in that if I use javascript to resize the container I
need the images to resize with it and have no spacing in between. I need a
CSS solution that works, I know I can hack it with JS but thats not what I
am trying to accomplish.
I have an example running at http://jsfiddle.net/twmxh/1/ of the whole
issue with expected output.