Add overflow:hidden
to .widefootercontent
.
Floated elements do not contribute to the parent container's height unless specifically done so with this overflow
property.
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.
.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:
Solution
Add overflow:hidden
to .widefootercontent
.
Floated elements do not contribute to the parent container's height unless specifically done so with this overflow
property.
OTHER TIPS
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.