CODEWITHSUNDEEP
htmlcss
icefish
icefish

Reputation: 65

Why my footer background color doesn't work?

#footer {
  background-color: #B40404;
}
#footerleft {
  background-color: #B40404;
  padding: 20px;
  float: left;
  width: 30%;
  text-align: left;
}
#footerleft span {
  text-decoration: none;
  display: table;
  color: #F79F81;
}
#footerleft span a {
  text-decoration: none;
  color: #F79F81;
}
#footerleft span a:hover {
  text-decoration: none;
  color: #FF0000;
}
#footerright {
  background-color: #B40404;
  float: right;
  padding: 20px;
  width: 30%;
}
#footerright span {
  padding: 5px;
  text-decoration: none;
  display: table;
  color: #F79F81;
}
#footerright span a {
  text-decoration: none;
  color: #F79F81;
}
<div id="footer">
  <div id="footerleft">
    <span><a href="#about">About Us</a></span>
    <span><a href="#tours">Tours</a></span>
    <span><a href="#bookings">Bookings</a></span>
    <span><a href="#contact">Contact Us</a></span>
    <span><a href="#southafrica">South Africa</a></span>
    <span><a href="#kenya">Kenya</a></span>
    <span><a href="#special">Special</a></span>
    <span><a href="#feedback">Feedback</a></span>
    <span><a href="#photogallery">Photo Gallery</a></span>
    <span><a href="#help">Help</a></span>
  </div>
  <div id="footerright">
    <span>Phone: 07 1441 2882</span>
    <span>Email: <a href="[email protected]">[email protected]</a></span>
    <span>Address: Level 8, 17 Melbourne Street, West End, 4101 QLD.</span>
    <span>BUSINESS HOURS: 9AM - 4PM</span>
  </div>
</div>

Can someone try my code in their computer and let me know if this will work. The background color didnt show up when I run in chrome or IE. Can someone help me figure out whats wrong and help me to find out the wrong point please?

Footer background didnt show up

Upvotes: 1

Views: 4058

Answers (2)

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382102

The #footer background isn't applied because the #footer element itself has a height of 0, because it only has floating content.

A solution is to ensure the content makes it grow:

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

More information on this problem (and alternate dirty solutions like using clear: both;) on Quirksmode

Upvotes: 2

Dmitriy
Dmitriy

Reputation: 4503

use clearfix 

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}


*{
    padding: 0;
    margin: 0;    
}

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

#footer {
    background-color: #B40404;
    width: 100%;
    
}
#footerleft {
  background-color: #B40404;
  padding: 20px;
  float: left;
  width: 30%;
  text-align: left;
}
#footerleft span {
  text-decoration: none;
  display: table;
  color: #F79F81;
}
#footerleft span a {
  text-decoration: none;
  color: #F79F81;
}
#footerleft span a:hover {
  text-decoration: none;
  color: #FF0000;
}
#footerright {
  background-color: #B40404;
  float: right;
  padding: 20px;
  width: 30%;
}
#footerright span {
  padding: 5px;
  text-decoration: none;
  display: table;
  color: #F79F81;
}
#footerright span a {
  text-decoration: none;
  color: #F79F81;
}
<div id="footer" class="clearfix">
  <div id="footerleft">
    <span><a href="#about">About Us</a></span>
    <span><a href="#tours">Tours</a></span>
    <span><a href="#bookings">Bookings</a></span>
    <span><a href="#contact">Contact Us</a></span>
    <span><a href="#southafrica">South Africa</a></span>
    <span><a href="#kenya">Kenya</a></span>
    <span><a href="#special">Special</a></span>
    <span><a href="#feedback">Feedback</a></span>
    <span><a href="#photogallery">Photo Gallery</a></span>
    <span><a href="#help">Help</a></span>
  </div>
    
  <div id="footerright">
    <span>Phone: 07 1441 2882</span>
    <span>Email: <a href="[email protected]">[email protected]</a></span>
    <span>Address: Level 8, 17 Melbourne Street, West End, 4101 QLD.</span>
    <span>BUSINESS HOURS: 9AM - 4PM</span>
  </div>
</div>

Upvotes: 1

Related Questions