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
Rasmus Gustafsson
6,262 PointsFooter 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>© 2014 Rasmus Gustafsson.</p>
</footer>
2 Answers
Jack Blankenship
Full Stack JavaScript Techdegree Graduate 39,036 PointsDo 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.
Rasmus Gustafsson
6,262 PointsThank you very much, sir. Used inspect element and found out that i forgot to close the <section>. Thank you very much in advance.
Rasmus Gustafsson
6,262 PointsThank you very much, sir. Used inspect element and found out that i forgot to close the <section>. Thank you very much in advance.
Johnny Garces
Courses Plus Student 8,551 PointsHey 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,
Wayne Priestley
19,579 PointsWayne Priestley
19,579 PointsHi 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.