Why I can't make background color on id footer

Question

I want to copy Google homepage and I want to fill the background color on div id footer. But it doesn't work.

This is my code:

http://codepen.io/jakzaizzat/pen/cqnIJ

Answer 1

the <ul class="first"> and <ul class="second">

Is in float left and right,

It would be best if you put <div class="clear"></div>

which .clear { clear:both; }

In the footer.

It would be like this

   <div id="footer">
     <ul class="first">
       <li><a href="#">Advertising</a></li>
       <li><a href="#">Business</a></li>
       <li><a href="#">About</a></li>
      </ul>
      <ul class="second">
        <li><a href="#">Privacy & Terms</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Use Google.com</a></li>
      </ul>
     <div class="clear"></div>
   </div> 

Or make the ul inside the footer display inline block with their corresponding width.

And other solution that I'm doing when I'm using floats.

It uses the auto clear method. Yaaay!

.auto-clear:before, .auto-clear:after { content:" "; display:table; }
.auto-clear:after { clear:both; }

Put auto-clear class on the parent of the floats.

So it would be like <div id="footer" class="auto-clear"> you may remove the <div class="clear"></div>

So it would be like this

<div id="footer" class="auto-clear">
<-- content here -->
</div>

Answer 2

#footer {
  background-color:#e7e7e7;
  overflow:auto
}

try this. by just adding "overflow:auto" to #footer, the background color appears. when you have floating divs in a container div, you usually have to handle the overflow property of the container div.

Answer 3

You don't have any background color because both of your nested div's have float:left once you use float on a element it loses it's height.

So essentially you have a wrap that is 0px high and no color is visible to you. You can fix this by adding another DIV after your second float div with a clear:fix this will clear all your nested elements and your background-color: will show.

I hope this helps you and you learn something new :) ... Good luck with your project!

Also @Asbar answer works as well. I have upvoted his answer!