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

Footer floating to the right of the page in the page contact.html

After adding all the code in the video... My footer floats to the left in the contact.html... This doesen't happen with Nick.

CSS (Btw, sorry if its messy)

body {
  font-family: 'Open Sans', sans-serif;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Raleway', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-family: 'Raleway', sans-serif;
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}

a {
  color: #6ab47b;
}

header {
  background: #6ab47b;
  border-color: #599a68;
}

h1, h2 {
  color: #fff;
}

nav {
  background: #599a68;
}

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px; 10px;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}

/* About */

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

h3 {
  margin: 0 0 1em 0;
}

nav a, nav a:visited {
  color: #fff;
}

nav a.selected, nav a:hover {
  color: #32673f;
}

/* CONTACT */
.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}


body {
  background-color: #fff;
  color: #999;
}

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
}

HTML

<footer>
        <a href="http://twitter.com/">
          <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">
        </a>
        <a href="http://facebook.com/">
          <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
        </a>
        <p>&copy; 2014 Rasmus Gustafsson.</p>
 </footer>

Hi Rasmus,

I've edited your code so it appears correct in your post.

;Here is a link to explain how to use Markdown to post your code How to post code If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code

Hope this helps.

2 Answers

Do you have Google Chrome as a browser? That has an excellent set of developer tools that helps find errors quickly.

My guess would be that you have an unclosed tag somewhere in your HTML.

Thank you very much, sir. Used inspect element and found out that i forgot to close the <section>. Thank you very much in advance.

Thank you very much, sir. Used inspect element and found out that i forgot to close the <section>. Thank you very much in advance.

Hey Rasmus,

i've copied your code http://codepen.io/johnnyginbound/pen/NPGKBd and don't see the float issue. Looks like you're set unless there's something else missing.

best,