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

Reginald Beneke
PLUS
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

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!