CODEWITHSUNDEEP
htmlcss
Eric H
Eric H

Reputation: 147

Mysterious gap in footer

Changing the footer around on a site and having a hard time trying to troubleshoot why I am getting a gap in the footer of the site. Looking to have the .footer_container with a white background. I have an .aux class with some additional copyright and contact info that is kept in the footer container but is not carrying the white background color from the footer container?? Am I missing something? Possibly something staring right at me that I simply overlooked? Any help would be appreciated.

Site is located [here][1]

css

#footer_container {
    position: relative;
    clear: both;
    bottom: 0;
    width: 100%;
    height: 216px;
    padding: 10px 0;
    background: #fff;
}

.container_16 {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}

.container_16 .grid_4 {
    width: 220px;
}

#footer_container footer nav li {
    margin: 0 5px
}

#footer_container footer nav li a {
    display: block;
    margin: 0 -5px;
    padding: 2px 5px;
    color: #222222
}

#footer_container footer a:hover {
    background-color: #fbfed9;
    color: #222222
}

#footer_container footer #footer_nav_container {
    overflow: hidden;
    background-image: ;
}

#footer_container footer #footer_teaser {
    position: relative;
    height: 141px;
    background:#f7f7f7;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

#footer_container footer nav li {
    margin: 0 5px;
}

#footer_container footer .aux {
    clear: both;
    padding: 7px 5px;
    margin: 10px 10px 24px;
    border-top: 1px dotted #9d9d9d;
    color: #222222;
    font-family: "Apercu Regular", Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 9px;
    line-height: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#footer_container footer .aux a {
    margin: 0 -3px;
    padding: 1px 3px;
}

#footer_container footer .aux div {
    float: left;
    white-space: nowrap;
}

#footer_container footer .aux .contact {
    float: right
}

#footer_container footer .aux .contact div {
    margin-left: 16px
}

#footer_container footer .aux .contact .cta {
    font-family: "Apercu Bold", Arial, Helvetica, sans-serif;
    font-weight: bold
}

Upvotes: 0

Views: 73

Answers (2)

chiliNUT
chiliNUT

Reputation: 19573

The <footer> doesn't have a background on it. The #footer_nav_container has a white background on it, but the .aux div is a child of <footer>, sitting below #footer_nav_container, so it also does not have a background being applied to it. I believe that applying a white background to footer with a simple

footer{
background-color:#FFF
}

will bridge the gap

Upvotes: 0

Lee Han Kyeol
Lee Han Kyeol

Reputation: 2481

Two changes are needed.

First disable padding-bottom: 40px of .page class.

.page {
  display: block;
  /* padding-bottom: 40px; */
  border-bottom: 1px solid;
  margin-bottom: 10px; }

And disable forced height: 216px of `#footer_container' div.

#footer_container {
    position: relative;
    clear: both;
    bottom: 0;
    width: 100%;
    /* height: 316px; */
    padding: 10px 0;
    background: #fff;
}

Upvotes: 2

Related Questions