Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Kreig Durham
Kreig Durham
8,829 Points
Posted by Kreig Durham
Kreig Durham
8,829 Points

My footer won't clear the floats above it. Not sure what I did wrong.

I've been toying around with revamping a local church's website (for fun). I somehow can't get the footer to clear.

Here's the html for that section. I don't know if I'm using clearfix improperly or just have my divs all messed up somehow.

<body>
  <div class="wrap clearfix">
    <div class="header">
      <header>
        <a href="index.html">
          <img src="img/church-logo.png" alt="Tri-City Baptist Temple Logo" id="logo">
        </a>
        <a href="index.html">
          <h1 id="name">Tri-City Baptist Temple</h1>
        </a>
        <a href="index.html">
          <h1 id="name-mobile">TCBT</h1>
        </a>
        <nav>

          <div class="navbar">
            <a href="index.html">Home</a>
            <a href="about.html" class="dropdown">
              <span>About</span>
              <div class="dropdown-content">
                <span href="#" class="menu-item">Service Times</span>
                <span href="#" class="menu-item">Location</span>
                <span href="#" class="menu-item">Beliefs</span>
                <span href="#" class="menu-item">Staff</span>
                <span href="#" class="menu-item">Know Jesus</span>
                <span href="#" class="menu-item">Ministries</span>
              </div>
            </a>
            <a href="contact.html" class="dropdown">
              <span>Contact</span>
              <div class="dropdown-content">
                <span href="#" class="menu-item">Directions</span>
              </div>
            </a>
            <a href="media.html" class="dropdown">
              <span>Media</span>
              <div class="dropdown-content">
                <span href="#" class="menu-item">Blog</span>
                <span href="#" class="menu-item">Audio</span>
                <span href="#" class="menu-item">Video</span>
              </div>
            </a>
            <a href="giving.html">Giving</a>
          </div>

          <div class="dropdown navbutton">
            <i onclick="myFunction()" class="dropbtn material-icons md-48">menu</i>
            <div class="dropdown-content">
              <a href="index.html" class="menu-mobile">Home</a>
              <a href="about.html" class="menu-mobile">About</a>
              <a href="contact.html" class="menu-mobile">Contact</a>
              <a href="media.html" class="menu-mobile">Media</a>
              <a href="giving.html" class="menu-mobile">Giving</a>
            </div>
          </div>

        </nav>
      </header>
    </div>
    <div class="body">
      <div class="banner">
        <img src="img/banner.jpg" alt="Upcoming Events" style="max-width:100%">
      </div>
      <div class="container">
        <div class="location col">
          <h1>Location & Services</h1>
          <iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2801.8693755378144!2d-122.5861796845137!3d45.391805746292256!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54957429daa93ff1%3A0xc44399c93ec07805!2sTri-City+Baptist+Temple!5e0!3m2!1sen!2sus!4v1470418002361" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
          <h2>Sundays</h2>
          <ul>
            <li>Sunday School — 9:45am</li>
            <li>Worship Service — 11:00am</li>
            <li>Evening Service — 6:00pm</li>
          </ul>
          <h2>Wednesday</h2>
          <ul>
            <li>Classes for All Ages — 7:00pm</li>
          </ul>
        </div>
        <div class="story col">
          <h1>Our Story</h1>
          <p>Tri-City Baptist Temple began in 1973 in a shopping center in Oregon City. Pastor Ken McCormick founded the church for the purpose of reaching the Gladstone, Oregon City, and West Linn areas for Christ.</p>
          <p>Since that time, countless souls have put their faith in Jesus. Our church continues to support missionaries around the world as they spread the Gospel. We are also actively engaging our comunity the Good News of Jesus Christ. The power of Jesus is still driving force behind all we do, and we give Him all the credit for the wonderful works we've witnessed!</p>
          <p>Tri-City Baptist Temple exists to Exalt God, Equip Believers, and Engage the World. We hope that you will come be our guest at an upcoming service!</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, totam, nihil assumenda voluptates unde ipsa inventore quidem voluptatem tempore ad illo, accusamus perspiciatis, quaerat eum facere dolor. Quidem, similique illum.</p>
        </div>
      </div>
    </div>
  </div>
  <footer class="footer">
    <a href="http://www.facebook.com/TriCityBaptistTemple"><img src="img/facebook.png" alt="facebook icon" class="facebook icon"></a>
    <a href="mailto:office@tcbt.org"><img src="img/mail.png" alt="email icon" class="email icon"></a>
    <a href="tel:503-655-9326"><img src="img/phone.png" alt="phone icon" class="phone icon"></a>
    <p>&copy; 2016 Exceed Design.</p>
  </footer>
</body>

And here's the css for the relevant sections.

/*************************
Body
*************************/

.wrap {
  min-height: calc(100vh-132px);
}

.banner {
  clear: both;
  display: block;
}

.container {
  width: 90%;
  max-width: 1150px;
  margin: 1em auto;
  text-align: center;
}

.body {
  display: block;
  position: relative;
  top: 101px;
}

.content {
  text-align: center;
}

#map {
  margin: 0 auto;
  display: block;
}

/*************************
Footer
*************************/

.footer {
  text-align: center;
  font-size: .75em;
  font-weight: 300;
  width: 100%;
  padding: 2em 0 0;
}

.icon {
  padding: 6px;
}

/*************************
Clearfix
*************************/

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

3 Answers

Kreig Durham
Kreig Durham
8,829 Points
Kreig Durham
Kreig Durham
8,829 Points

Ok, I solved my mistake. I had given my header a fixed position so it would always be at the top of the page, then I wrapped the content below it in a div with the class "body". I gave the body class a relative position starting under the fixed header. The problem was that my footer was left out of the "body" class div, so it was being included in that relative positioning.

I fixed it by putting the ending of that div tag below the footer, then I applied the clearfix class to the footer like Jacob Mishkin suggested. Now it's working perfectly!

Jacob Mishkin
Jacob Mishkin
23,117 Points
Jacob Mishkin
Jacob Mishkin
23,117 Points

you need to apply the clearfix class to the footer.

Kreig Durham
Kreig Durham
8,829 Points
Kreig Durham
Kreig Durham
8,829 Points

Alright, I just tried that, and it didn't seem to change anything.

Kreig Durham
Kreig Durham
8,829 Points
Kreig Durham
Kreig Durham
8,829 Points

Clearfix doesn't seem to do anything when I put it with the wrap class or the footer element. If I apply the class clearfix to the body class, the footer shifts a little, but still ends up getting overlapped by the floated columns above it.