Поместите теги <img> в нижний колонтитул <div>

Возникает проблема с перемещением этих социальных изображений значков в нижнем колонтитуле. Если я увеличиваю высоту от 40 пикселей до 60 пикселей, я могу увидеть полное изображение, но не могу понять, как перемещать его в пределах раздела без изменения размера раздела.

Код ниже. Я в тупике. Спасибо за помощь. CSS:

.footer {
position:fixed;
/*Opacity start*/
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 filter: alpha(opacity=80);
-moz-opacity: 0.80;
-khtml-opacity: 0.8;
opacity: 0.8;
/*Opacity end*/ 
left:0px;
bottom:0px;
height:40px;
width:100%;
background:#333333;
}

 div.socialIcons ul li 
{
display: inline-block;
vertical-align:top;
padding-right: 10px;
padding-bottom: 5px;
float: right;
}

div.footer a
    {
    color:#441111;
    text-decoration:none;
    }
div.footer ul
    {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    list-style-type: none;
    }
div.footer p 
{
text-align: center;
font-size: 75%;
padding-left: 10em;
padding-top: .5em;
color: #ECECEC;

}

HTML:

<div class="footer">


<!--   *****   Social media icons   *****   -->
<div class="socialIcons">

    <ul id="profile">
        <li><a href="http://www.twitter.com/" title="Twitter"><img src="./design/twitter.jpg" alt="My Twitter" /></a></li>
        <li><a href="http://www.pinterest.com/" title="Pinterest"><img src="./design/pinterest.jpg" alt="My Pinterest" /></a></li>
        <li><a href="http://www.linkedin.com/" title="LinkedIn"><img src="./design/linkedin.jpg" alt="Me on LinkedIn" /></a></li>
    </ul>
</div>
<p><i>&copy;2013</i></p?>