Div floated left and div floated right causing background to disappear

Question

I need the footer to have an image floated to the left and some more text (an inline ul with links) floated to the right of the footer.

Here is the CSS & HTML:

 footer { clear: both; background: #113551; width: 90%; margin: 0 auto; } .left-foot { float: left; } .right-foot { float: right; } 

 <footer> <div class="left-foot"> <p> derp 1</p> </div> <div class="right-foot"> <p>derp2</p> </div> </footer> 

It works-ish, however the background color of the footer does not show up. Why not? what is the best way to fix this? It doesn't have to necessarily be exactly like this; I didn't have any luck getting this with position relative and absolute either.

Answer 1

for clearing float use overflow:hidden

demo - http://jsfiddle.net/b0v33rc0/1/

or add a div with styles clear:both before closing tag of the footer

demo - http://jsfiddle.net/b0v33rc0/2/

Answer 2

I was about to write the same as Vitorino Fernandes has written.

However you could also write like given below;

HTML

<footer>
<div>
<p id="p1"> Derp1</p>
<p id="p2> Derp2</p>
</div>
</footer>

CSS

 footer{
    width:100%;
    background: #113551;
    }

    footer > div{
    width:90%;
    margin:auto;
    }

    #p1{
    float:left;
    }
    #p2{
    float:right;
    }

What i have done is that I only used one div as a container of <p> .