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 How to Make a Website Adding Pages to a Website Style New Pages

Ariel Aronica
Ariel Aronica
6,646 Points

Why 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?

Can you post the code?

Ariel Aronica
Ariel Aronica
6,646 Points

The issue exists in the actual downloadable files from Treehouse.

I'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

Hi 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.

I 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
Ariel Aronica
6,646 Points

Yes. 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.

Hmm. 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
Ariel Aronica
6,646 Points

I 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.