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!

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

Eben Gunadi
Eben Gunadi
3,380 Points

Why is <header> floated to the left?

In the desktop version, #logo is floated to the left and nav is floated to the right. So why do we still need to float header, which contains both of them, to the left?

https://teamtreehouse.com/library/how-to-make-a-website/styling-web-pages-and-navigation/build-navigation-with-unordered-lists

2 Answers

Garrett Levine you're partly right but you don't have to float everything. You can always clear the float to reset the flow of the page.

Eben Gunadi to answer your question in advance, floating the header that contains the logo and the nav was to keep the header aligned to the left when Nick starts coding the desktop version. Around 1:51 in the video he says, "floating the header has no use right now, but it will when we start styling the desktop layout"

Eben Gunadi
Eben Gunadi
3,380 Points

Thank you for the clarification, Garrett. So, in general, when elements inside a div are floated, the div itself needs to be anchored -- which in this case was done by floating it to the left (while in the "CSS Basics" course it was done by using a "clearfix hack"). Is that correct?

Yes. Once you've floated elements within a div it should be anchored. I don't remember exactly what Nick does after but you're definitely right about the clearfix hack. The clearfix hack resets the flow so that the browser respect the height of the elements that are nested within the element with the clearfix applied.

Garrett Levine
Garrett Levine
20,305 Points

I am still learning/understanding the foundations of CSS, but this is what I think is correct.

floating breaks something out of the standard 'flow' of the document, so once you start floating elements on the page, EVERYTHING needs to be floated, otherwise you will run into errors where elements start overlapping one another

Eben Gunadi
Eben Gunadi
3,380 Points

That makes sense. Thanks for the quick reply!