CODEWITHSUNDEEP
htmlcss
Jakz Aizzat
Jakz Aizzat

Reputation: 159

Why I can't make background color on id footer

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

Upvotes: 5

Views: 97

Answers (4)

M.chaudhry
M.chaudhry

Reputation: 651

EDITED

Well Answered by Wesley Lachenal

Upvotes: 0

I am Cavic
I am Cavic

Reputation: 1085

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!

Upvotes: 2

Asbar
Asbar

Reputation: 391

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

Upvotes: 3

Brian Coolidge
Brian Coolidge

Reputation: 4649

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>

Upvotes: 3

Related Questions