Height auto doesn't work even with clearfix - html

Question

Probably not the first time you see this question... but I can't solve this problem.
Here is live version
http://jsfiddle.net/LndEh/
If you change height for .projectwrap, you will see what I am trying to achieve. I have tried add clearfix etc.
HTML
<div class="projectwrap">
<img src="http://www.vectortemplates.com/raster/superman-logo-012.png">
<div class="inner"><span>sometext</span></div>
</div>
<div class="projectwrap">
<img src="http://www.vectortemplates.com/raster/superman-logo-012.png">
<div class="inner"><span>some text</span></div>
</div>
<div class="projectwrap">
<img src="http://www.vectortemplates.com/raster/superman-logo-012.png">
<div class="inner"><span>some text</span></div>
</div>
CSS
.projectwrap
{
position: relative;
width: 28%;
height:auto;
float:left;
}
.projectwrap img
{
position: absolute;
width: 100%;
}
.inner
{
width: 100%;
height: 100%;
background-image: url(http://goodlogo.com/images/logos/batman_logo_2574.gif);
background-size: cover;
position:absolute;
z-index: 11;
opacity: 0;
-webkit-transition: opacity 400ms linear;
-o-transition: opacity 400ms linear;
-moz-transition: opacity 400ms linear;
transition: opacity 400ms linear;
}
.inner a
{
float:left;
text-align: center;
display:table;
width: 100%;
height:100%;
}
.inner a span
{
display: table-cell;
vertical-align: middle;
width:100%;
height:100%;
color:#fff;
text-align: center;
text-transform: uppercase;
}
.inner:hover
{
opacity: 1;
-webkit-transition: opacity 400ms linear;
-o-transition: opacity 400ms linear;
-moz-transition: opacity 400ms linear;
transition: opacity 400ms linear;
}

Answer 1

Since the containers are floated and contain absolutely positioned images, they have no height and will float over each other.
If you want all three logos to appear, change the CSS for the images to position:relative
.projectwrap img {
position: relative;
width: 100%;
}
http://jsfiddle.net/LndEh/1/
EDIT:
Another method, if you need to use position:absolute on the images:
Set a minimum height for the .projectwrap divs so that they don't collapse to zero height.Then they will float as expected.
.projectwrap {
position: relative;
width:28%;
float:left;
min-height:5px;height:auto!important;height:5px;
}
http://jsfiddle.net/LndEh/2/
EDIT:
For the additional three (hidden) images, I have changed from using a background image to using the same 100% width method you used for the superman logos. I placed the links over the image by positioning them absolutely.
.inner {
position:relative;
width: 100%;
...
}
.inner a {
position:absolute;
...
}
http://jsfiddle.net/LndEh/3/
EDIT:
I think I see now what you're going for.
I switched from using background-image on .inner to using <img /> and kept your elements positioned absolutely. Does that work better?
http://jsfiddle.net/LndEh/7/