Display:inline-block not allocating the space properly - html

Question

I am using five div in my footer content with equal dividing space. But it is going to the next line instead of showing in one line. Check my fiddle here http://jsfiddle.net/7ZAA6/.
HTML
<div class="mainFooterLinks">
<div class="divideFooter">
<div class="fl_title">Test</div>
<div class="fl_links">
<ul>
<li>Solutions</li>
<li>Services</li>
<li>DotNetNuke</li>
<li>Web Design & Development</li>
<li>EDC</li>
</ul>
</div>
</div>
<div class="divideFooter">
<div class="fl_title">Test Sharepoint</div>
<div class="fl_links">
<ul>
<li>Services</li>
<li>Web Parts</li>
<li>Solutions</li>
<li>SharePoint Support</li>
</ul>
</div>
</div>
<div class="divideFooter">
<div class="fl_title">Test CRM</div>
<div class="fl_links">
<ul>
<li>Products</li>
<li>Test Support</li>
<li>Services</li>
<li>Test CRM</li>
</ul>
</div>
</div>
<div class="divideFooter">
<div class="fl_title">Test DNN</div>
<div class="fl_links">
<ul>
<li>Website Development</li>
<li>Skins</li>
<li>Modules</li>
<li>Support & Maintenance</li>
<li>EDC</li>
</ul>
</div>
</div>
<div class="divideFooter">
<div class="fl_title">Test K12 DRM</div>
<div class="fl_links">
<ul>
<li>What is K12DRM?</li>
<li>K12DRM Features</li>
</ul>
</div>
</div>
CSS
.mainFooterLinks
{
max-width:1200px;
background-color:#333;
padding:20px 0px 20px 0px;
margin:0px auto;
box-sizing:border-box;
}
.divideFooter
{
display:inline-block;
width:20%;
vertical-align:top;
padding:0;
margin:0;
}
.fl_title
{
font-family:Arial;
color:#cdcdcd;
font-size:15px;
font-weight:700;
padding-left:15px;
}
.fl_links a, .fl_links a:link, .fl_links a:active, .fl_links a:visited
{
font-family:Arial;
color:#636363;
font-size:12px;
font-weight:400;
text-decoration:none;
}
.fl_links a:hover
{
text-decoration:underline;
}
.fl_links ul
{
list-style-type:none;
list-style-image:url('fbull.jpg');
padding:7px 10px 5px 30px;
margin:0;
}
My Solution: If I add float:left property on divideFooter class and the bottom of the last div, adding one more div with clear:both property is working fine here.
But why the inline-block not working properly? Recent time many people are told like do not use float property, use inline-block property. So that i want to know the reason what is wrong my code?

Answer 1

Add font-size: 0 to your .mainFooterLinks class. With inline-blocks element, whitespace is added between them

Answer 2

It is because using inline-block considers line breaks as whitespace characters. You can overcome this issue by applying font-size=0 in the parent container, like this:
.mainFooterLinks
{
max-width:1200px;
background-color:#333;
padding:20px 0px 20px 0px;
margin:0px auto;
box-sizing:border-box;
font-size: 0;
}
and then reset the font size in inner container (.divideFooter in this case).

Answer 3

The reason it's happening is stated in the answers above..
A good solution you can use is this:
.mainFooterLinks {
white-space:nowrap;
}
.divideFooter {
white-space:normal;
}
This will get everything on the same line.. after that tweak your padding's to make everything fit ;]
EXAMPLE