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

Ariel Aronica
Ariel Aronica
6,646 Points
Posted by 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?

Baruch Velez
Baruch Velez
275 Points

Can you post the code?

Ariel Aronica
Ariel Aronica
6,646 Points
Ariel Aronica
Ariel Aronica
6,646 Points

The issue exists in the actual downloadable files from Treehouse.

Liz Laffitte
Liz Laffitte
23,691 Points

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

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

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.

bleedcmyk
bleedcmyk
5,945 Points
bleedcmyk
bleedcmyk
5,945 Points

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

bleedcmyk
bleedcmyk
5,945 Points

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