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 trialAriel Aronica
6,646 PointsWhy is the header floated left? It makes the image appear off to the right of the page.
My image disappeared off the page and I did not know why. I then found out we will need either a clear of the float or to remove the header float left to prevent the image from appearing off screen. I noticed even in your demo files the image is off screen. Is this intentional and we are fixing it later on?
Ariel Aronica
6,646 PointsThe issue exists in the actual downloadable files from Treehouse.
Liz Laffitte
23,691 PointsI'm not sure what step you are in on this track, but I have that float:left still in my CSS so I think it will come up later. In my finished project, my name and title are floated left in the header and the nav is floated right in the header.
4 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Ariel,
The header is floated left to keep it from collapsing when the logo and nav are floated for desktop layouts. This is done in the responsive portion of the course. Normally a parent will not contain it's floated children and collapse to zero height. Floating the parent is one of a handful of techniques to make it contain floated children.
One solution then is to clear the floated header. It will work if you have the profile photo clear the float but I recommend instead that you have your wrapper div clear the float since it's the element that immediately follows the header. This will ensure that the browser will force the wrapper div and everything inside of it down below the header.
bleedcmyk
5,945 PointsI think I remember someone bringing this up a few weeks ago.
https://teamtreehouse.com/forum/code-bug-in-firefox-no-profile-photo
Is the profile photo the image that is disappearing?
Ariel Aronica
6,646 PointsYes. I see that they have a comment in the instructor notes. I guess now my question is, why is the header set to float left in the first place? The clear code worked for me, but I see no need for float in that space.
bleedcmyk
5,945 PointsHmm. I'm not really sure, because at a glance it doesnt do anything. And now that I'm looking at it closer, you're right about the float being what breaks the display block on the image tag in Firefox.
Ariel Aronica
6,646 PointsI deleted my float:left; in header, and put a note to put it back if necessary. I am using Firefox, but the code should work across browsers.
Baruch Velez
275 PointsBaruch Velez
275 PointsCan you post the code?