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.

score 1 · Accepted Answer · answered Jan 11 '15 at 17:03

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/

answered Jan 11 '15 at 17:03

Vitorino fernandes

15,794
3
20
39

the clear: both; is for the stuff floated above it. I should of been more clear about that, sorry. – imnothardcore Jan 11 '15 at 17:41
no problem :) buddy add `clear:both` and `overflow:hidden` @imnothardcore – Vitorino fernandes Jan 11 '15 at 17:42
http://stackoverflow.com/questions/12871710/what-does-the-css-rule-clear-both-do this will help you – Vitorino fernandes Jan 11 '15 at 18:26

Waqar · Answer 2 · 2015-01-11T18:19:42.987

0

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>.

edited Jan 11 '15 at 18:19

answered Jan 11 '15 at 17:18

Waqar

826
5
16

1

when I tried this the footer color did not show up. – imnothardcore Jan 11 '15 at 18:17
Oh sorry i forgot to add background color.. Now it is added. Check it out – Waqar Jan 11 '15 at 18:20
I will have to experiment with this as well. thanks! – imnothardcore Jan 11 '15 at 18:43

Div floated left and div floated right causing background to disappear

2 Answers2

Linked