inline-block div expanding its width to the parent div, why?

Question

As you can see in this jsFiddle, the 'innerFooter' div is expanding to it's parent 'footer' despite it's display: inline-block style. I've tried display: table, which WORKS, just wondering while inline-block isn't. Thanks!

HTML

<div id="footer">
        <div id="innerFooter" class="clearfix alignCenter">
            <ul id="resources">
                <li><a href="#"><b><u>Useful links</u></b></a></li>         
                <li><a href="#">About us</a></li>
                <li><a href="#">Privacy</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
            <ul id="social">
                <li><a href="#"><b><u>Get social</u></b></a></li>           
                <li><a href="#">Twitter</a></li>
                <li><a href="#">Facebook</a></li>
                <li><a href="#">Pinrest</a></li>
            </ul>
            <ul id="contact">
                <li><a href="#"><b><u>Contact us</u></b></a></li>           
                <li><a href="mailto:emailaddress>Email us</a></li>
            </ul>               
        </div>
</div>

CSS

clearfix{/*Clearfix hack here*/} 
alignCenter{margin: 0 auto}
a{color: inherit}
#footer{
    color: #fff;    
    background-color: #000; 
}
#innerFooter{
    display: inline-block
}
#footer ul{
    width: 200px;
    display: inline-block;
    margin: 0 auto;
    float: left;
}
#footer ul > li{
    margin: 5px;
    list-style-type: none;
}

Answer 1

the inner footer has floated ellements in it, so its width as, as the summary of all floated ellements' width ("ul") in it.