Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

Please show us the code.

@jeffbusch like that?

2 Answers

Sean T. Unwin
Sean T. Unwin
28,660 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;.

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