Why does my background colour end?

Question

I am creating a footer for a webpage and for some reason, I can't get the background colour to fill the whole div once I start populating it.

EXAMPLE

.widefooter {
    background-color:#EFEFEF;
    width:100%;
    font-size:12px;
}

After I add the "links" under the <hr> the background colour of the footer just ends, even though the links are nested in the footer div, not after it.

This is what I'm getting:

This is what I want to achieve:

Answer 1

Add overflow:hidden to .widefootercontent.

Floated elements do not contribute to the parent container's height unless specifically done so with this overflow property.

Answer 2

It is the problem of floating elements. which need to be cleared by a third element specially created for clearing floats.

HTML

<div class="parent">
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   <div class="clearFloat"></div>  <!-- for clearing above float elements -->
</div>

CSS

.clearFloat {
    clear: both;
}

I always prefer adding a last child element to clear the floats instead of using overflow :hidden property because if the child element needs to be shown outside of the parent element using position: absolute then overflow: hidden will hide the child. which is really frustrating in bigger projects.

Working Fiddle