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 trialJessica Brown
494 PointsMy footer is stuck on the top of my page, pushing my gallery to the left.
I am working on the "Build a Website" and for some reason my footer keeps moving to the righthand top of the page, and pushing my gallery to the left, off center. My gallery is no longer resizing the elements to fit the webpage as is adjusts, and the footer moves to the top. Is something wrong with my wrapper? please help, ive been stuck for days.
ALL MY CSS CODE:
/*************** GENERAL ***************/
/*********** TO ADD FONT, FIRST ADD CODE TO HTML BETWEEN NORMALIZE AND MAIN.CSS ***********/
body { font-family: 'Snippet', sans-serif; }
a { text-decoration: none;
}
img { max-width: 100%; }
wrapper{
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a{ color: #0000bb; }
/*************** HEADING ***************/
nav h1 {
text-align: center }
/* logo text */
logo {
text-align: center; margin: 0;}
h1 { font-family: 'Snippet', sans-serif; margin: 15px 0 -5; font-size: 1.75em; Font-weight: heavy; line-height: 1.5em; }
h2 { font-size: 1.0em; /*********************** MARGIN- 1stROW=top, 2nsROW=both sides, 3RD NO=bottom. ***********************/ margin: -5px 0 0; font-weight: normal;
}
/************************************ NAVIGATION ************************************/
nav{ text-align: center; padding: 15px 0; margin: 20px 0 0; }
/************************************* FOOTER ************************************/
footer { font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc;
}
/*************** PAGE: PORTFOLIO ***************/
gallery li {
float: left; width: 700px; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7
}
gallery li a p {
margin: 0; padding: 5% font-size: 0.75em; color: #bdc3c7
}
/*************** COLORS ***************/
/* site body / body { background-color: #fff; color: #999; } / green header */ header{ background: #6ab47b; border-color: #599a68; }
h1, h2{ color: #fff; } /* links */
h1{ color: #ffffff; }
h2{ color: #ffffff; } /* nav color */ nav{ background:#599a68; }
nav a, nav a:visited { color:#fff; } /* selected nav link*/ nav a.selected, nav a:hover { color:#32673f; }
Jessica Brown
494 Points@jeffbusch like that?
2 Answers
Sean T. Unwin
28,690 PointsIs there a reason that the class operator is not shown in your pasted code? e.g. .logo {text-align: center; margin: 0;}
-- notice the .
at the beginning of logo
.
I'm not sure how your HTML is laid out, however, if .gallery
and your footer
are both nested within .wrapper
then your footer would likely display as you mention because .gallery
has a declaration of float: left;
.
If this is what is causing the issue, I see 3 options( there may be others) to choose from:
- Remove the float from
.gallery
. Although this would depend upon your UI structure. - Place
footer
outside of.wrapper
. - Set
footer
toclear: both;
.
Jessica Brown
494 PointsTHANK YOU! #3 worked like a charm! You're so smart!
Jeff Busch
19,287 PointsJeff Busch
19,287 PointsPlease show us the code.