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
Terrance Corley
11,990 PointsCan someone explain to me why we are floating the header to the left in this instance with a width of 100%?
I understand floats, but I'm not understanding why we are floating our header to the left and then specifying a width of 100%. Nick says doing so now has no practical purpose for the development of the mobile version of the site, but it will make sense when we start coding the desktop version of the site. I've completed the project and still don't understand why we had to float the header to the left. If I comment out the float declaration from the header though, most of my header disappears.
Any thoughts?
Terrance Corley
11,990 PointsHi Luis Magaña,
Jason was actually able to explain to me the issue. What you said is something I will definitely keep in mind when working on future projects. Thanks for the feedback!
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Terrance,
For the desktop layout, the logo and the navigation are being floated. Normally, a parent element will not contain its floated children and will collapse in height. This is what you experienced when you removed the float declaration from the parent header element.
Floating the parent is one of several ways to force an element to contain its floated children. So Nick floated the header early on knowing he was going to float the children later.
You may have heard of the clearfix hack. This is another way to solve the problem.
Terrance Corley
11,990 PointsHey Jason!
You explained this perfectly. I now understand exactly what's going. Thanks for the help!
Kevin Heck
Courses Plus Student 1,290 PointsHi, Terrance. The reason that you are floating the images is because when your site is viewed on a device larger than a mobile phone or smaller tablet, the images will expand to take up the space available. It is a type of responsive code that allows for flexibility between view screens.
Also, the reason that Nick is building the mobile version first is because it is easier to build a site for mobile view screens and then layer a little code for desktop than it is to build for desktop and layer a lot of code for mobile view screens.
Hope this helps!!!
Kevin Heck
Courses Plus Student 1,290 Pointsp.s. if you take the tab that your site comes up on in your browser out of fullscreen and scale it down from right to left, you will see the images move from three columns down to two to allow for an un-clustered view of the images on a smaller view screen.
Terrance Corley
11,990 PointsHi Kevin,
Thanks for taking the time to respond to my issue but I was actually asking about the header element itself, not the image gallery. Thanks for taking the time though!
Luis Magaña
13,042 PointsLuis Magaña
13,042 PointsMy best guess would be that he was taking a mobile first approach, so in specifying a float left at the lowest view port width setting would allow him to scale up for larger devices and specify a different a different width maybe 50% and divide header into two sections. Thats my best guess would need to see the markup to make a better assessment.