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;
}
the inner footer has floated ellements in it, so its width as, as the summary of all floated ellements' width ("ul") in it.