Always li items at top

I have this html:

 <ul class="logos">
                    <li><a href="deelnemers-details.html" title="ATAG"><img src="content/img/vaste-afbeeldingen/atag.jpg" width="180" height="45" alt="ATAG" /></a>
                        <div class="info">
                            <h2>ATAG</h2>
                            <p>some neat text here </p>
                        </div>
                    </li>
</ul>

In the ul are a lot of li items. Every li have a a tag and a div class info. The info div is the div for the information. When i hover over the <a><img></a>. Then the <div> info is开发者_如何学运维 show.

But now my question about this code. I want that always the li items are on the top. Now when i hovering over the li. The info box come and the other li items going down. How can i fix this?

This is the CSS:

/* logos */
#deelnemers .logos {
    position            : relative;
    padding             : 12px 0 0;
}

#deelnemers .logos li {
    display             : inline-block;
    position            : relative;
    vertical-align      : top;
}

#deelnemers .logos li a {
    display             : block;
    height              : 120px;
    width               : 180px;
    margin              : 0 30px 0 0;
    padding             : 5px;
    border              : 1px solid #ddd;
    background          : #FFF;
}

#deelnemers .logos li .info {
    width               : 180px;
    margin              : 0 0 15px;
    padding             : 5px;
    border-right        : 1px solid #ddd;
    border-bottom       : 1px solid #ddd;
    border-left         : 1px solid #ddd;
}

You need to set absolute positioning to the .info elements, with bottom and left both 0px.

CSS for this:

#deelnemers .logos li .info {
    position: absolute;
    bottom: 0px;
    left: 0px;
    ...
}

Live test case: http://jsfiddle.net/yahavbr/wgCuF/1/