Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Zette Harbour
Zette Harbour
1,891 Points

Footer moves when I give <section> an id

Before I added the id="primary" or id="secondary to the 2 sections, my footer stayed at the bottom of the page when I would enlarge my screen.

After I added those id's, the foot moves up in between the 2 sections when I enlarge the screen. It doesn't do it on the tutorial video.

Here is the CSS:

@media screen and (min-width: 480px) {

  /**********************************
  TWO COLUMN LAYOUT
  ***********************************/

  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: 40%;
    float: right;
  }

}

Here is the html:

<section id="primary">
        <h3>General Information</h3>
        <p>I can be reached by email or message me through Facebook, Twitter or LinkedIn.</p>
        <p>Please only use phone contact for urgent inquiries.</p>
      </section>
      <section id="secondary">
        <h3>Contact Details</h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:441-6688"> 441 dash 6688</a></li>
          <li class="mail"><a href="mailto:zetteharbour@gmail.com">zetteharbour at gmail.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=zetteharbour">@ZetteHarbour</a></li>
        </ul>
      </section>
      <footer>
        <a href="https://www.facebook.com/ZetteHarbour">
          <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <a href="https://twitter.com/ZetteHarbour">
          <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <p>&copy; 2014 Zette Harbour</p>
      </footer>

Anybody have any ideas?

Thanks!

3 Answers

Maybe the footer needs clear: both; attribute?

I have a guess, but it's just a guess--my grasp of the columns and things is still shaky at best.

The footer moves up because 50% and 40% only add up to 90% of the total width of the container. The footer's trying to squeeze into the remaining 10%.

When I plugged in your css and set each of the two sections to 50%, the footer stayed on the bottom where it belongs. Is 40% a typo?

If the instructor has the two columns set at 50% and 40% like yours, then something else must be taking up the remaining 10%--margins or something? I would double check their code to try to find something I overlooked that accounts for the missing 10%.

If that's not it, maybe I at least gave you more ideas to try?

Zette Harbour
Zette Harbour
1,891 Points

thank you! this will be helpful in to know in the future.

Zette Harbour
Zette Harbour
1,891 Points

thank you, I do have the clear: both, ahhh, but just now I see that I forgot the ; at the end of it.