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

Posted by Jessica Brown
Jessica Brown
494 Points

My 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; }

Jeff Busch
Jeff Busch
19,287 Points

Please show us the code.

Jessica Brown
Jessica Brown
494 Points

@jeffbusch like that?

2 Answers

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Is 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:

  1. Remove the float from .gallery. Although this would depend upon your UI structure.
  2. Place footer outside of .wrapper.
  3. Set footer to clear: both;.
Jessica Brown
Jessica Brown
494 Points
Jessica Brown
Jessica Brown
494 Points

THANK YOU! #3 worked like a charm! You're so smart!