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

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

Zette Harbour
Zette Harbour
1,891 Points
Posted by 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

Ivan Esterajher
Ivan Esterajher
3,316 Points

Maybe the footer needs clear: both; attribute?

Deborah Ragas
Deborah Ragas
5,049 Points
Deborah Ragas
Deborah Ragas
5,049 Points

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