HTML CSS3 - Why footer background color doesn't work?

Question

I'm trying to set a footer background color to something different that white. It doesn't work. I was successful to change background of other layout element but footer is problem.

Here is some code:

<footer>
<div id="left"><p>Some_left_text</p></div>
<div id="right"><p>Some_right_text</p></div>
</footer>

CSS for footer:

footer {    
    background-color: yellow;
}

#left { 
    float: left;    
    margin-left: 180px;
}

#right {
    float: right;
    margin-right: 180px;    
}

#left, #right p {
    letter-spacing: 5px;    
}

Answer 1

Your are using floating divs so the height of the footer is 0.

You can solve this just adding min-height to footer.

footer {    
    background-color: yellow;
    min-height: 40px
}