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

Reginald Beneke
PLUS
Reginald Beneke
Courses Plus Student 4,282 Points
Posted by Reginald Beneke
Reginald Beneke
Courses Plus Student 4,282 Points

Problem with "@media screen (min-width:660px)". What do I need to fix?

When I edit the 'nav' to float the nav to the right, it messes up the page completely. I'm doing exactly as Nick does, still it's not working. Here is my workspace for you to look at. https://w.trhou.se/uxjwsb9bjg

Looking for some solid advice on how I can fix this?

Kind regards, Reg.

1 Answer

Ryan Dudley
Ryan Dudley
Treehouse Project Reviewer
Ryan Dudley
Ryan Dudley
Treehouse Project Reviewer

Hey Reg, hope your day is going well so far! I think I might be able to provide some insight on your problem.

When you float elements, they break out of the normal page flow and are placed on either the left or right of its container. This causes content to wrap around them. In your case when you floated the nav it caused the section below it to start wrapping around it; this is what is causing the weird layout effects you are seeing.

This is a common issue with floats, and something you need to keep an eye out for. The most common solution to this problem is using something called a clearfix. There are various different clearfixes out there, or you can simply use the CSS clear property. The one I used to solve your issue can be found below:

.clearfix::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

You can add that CSS rule to your stylesheet, the end of main.css for example. From here you would place the clearfix class on the parent element that contains the floated children. In your case this would be the header element, like so

<header class="clearfix">

This should stop the gallery from being affected by the floated navigation element, and act as you would normally expect it to. I hope this was helpful, and keep at it!