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 Trevor Johnson
Trevor Johnson
14,427 Points

Layout Help - Position Navigation & Footer With CSS

Hi, I am working on building a simple HTML & CSS site. I have run into an issue with the way the navigation and footer are displaying when you make the browser smaller. I am not trying to make a fully responsive site right now. My navigation and footer should extend the full width of the paget. The content within the nav bar should always be at 960px and centered, while its parent container should always extend the full width, giving the whole navigation bar a white background. When I reduce the screen size the white background stops extending the width of the screen, and instead only extends 960px, and the navigation links extend beyond where they should be. They should always be contained in the nav bar. The footer is having this same issue.

Here is a codepen to check out the issue: https://codepen.io/tsjohns9/full/WMemrY/

I appreciate any help, thank you

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

You say "The content within the nav bar should always be at 960px", but then "When I reduce the screen size the white background ... only extends 960px". Those two things seem like they would go together, I'm not sure why you would expect anything otherwise with the given constraint.

Also, I'm not sure what you mean by "the navigation links extend beyond where they should be". Where they "should be" is at the right edge of the 960px-wide bar, which is where they stay in the demo. A horizontal scroll bar appears to allow you to position them into the view.

Trevor Johnson
Trevor Johnson
14,427 Points

How can I make it so that the nav bar and footer always extend the width of the screen, and the links stay within the navbar?

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

That's what it does now, right? That's what I'm seeing on Chrome.

Trevor Johnson
Trevor Johnson
14,427 Points

Make the screen smaller. You will see that you can scroll right, and that the footer and nav don’t go all the way to the end, and the links float outside the nav.