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
Alex McKeown
1,051 PointsAbout.html not displaying correctly (>= 660px) when nav is floated to right.
Hi
When I set this float in responsive.css to the right (as instructed), the page does not look correct:
@media screen and (min-width: 660px) {
/**********************************
HEADER
***********************************/
nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: 5%;
text-align: right;
width: 30%;
}
If I set float to center it is closer to the desired result i.e. the nav and header are alongside each other, but I'd welcome some help getting float: right to work please.
Workspace snapshot is here.
I have tried to validate the html and CSS using both naked eye and validation websites, but I can't find the root cause.
Please help!
Thanks
Alex
5 Answers
Ted Sumner
Courses Plus Student 17,967 PointsTry the fix in this post.
Ted Sumner
Courses Plus Student 17,967 PointsLook at your width for the #logo in your responsive.css file and see if you see a problem.
Alex McKeown
1,051 PointsThanks for your quick response Ted.
Whilst this has corrected the issue, in the next step of the video I have floated the logo to the left.
For some reason this is appearing above the nav, rather than alongside it. Do you know what might be causing this?
Thanks
Alex
Alex McKeown
1,051 PointsOh dear :-S
Thanks for your help today Ted :-)
Ted Sumner
Courses Plus Student 17,967 Pointsno problem. Happy to help. please mark the best answer for your questions so it indicates the problem is solved.
Alex McKeown
1,051 PointsOk, I've done so, thanks.
Hector Castillo
2,620 PointsHi Alex,
Good job on finding a way to fix the problem by changing the code in your responsive.css but I wanted to let you know the reason why you had problems using the code form the videos to begin with.
The main reason was not the code in your responsive.css but the code in your main.css. In your header element selector you have two "width" properties like so...
/***************************************
HEADING
****************************************/
header{
width: 100%;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width 100%;
}
The header element in your main.css should have a flot: property with a value left like so...
/***************************************
HEADING
****************************************/
header{
float: left;
width: 100%;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
}
I am guessing the second width property you had was going to be the flat property but accidentally put another width. Give it a try if you still have the original files.
Ted Sumner
Courses Plus Student 17,967 PointsWhile having two widths is not great, it is not the cause of the problem. The cascading nature of CSS would make the second override the first. Likewise, the responsive CSS overrides the main because it is linked after main.css.
The problem is margin collapse, which occurs when there are two margins touching with nothing in between them. Usually you do not notice the problem but when it occurs between a parent and child element it can cause the child to be forced out of the container. The issue is properly addressed by applying the clearfix solution as discussed in the link. The link above has a reference that explains collapse in detail.
Ted Sumner
Courses Plus Student 17,967 PointsTed Sumner
Courses Plus Student 17,967 Pointsedited to format text.