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
Edward Seibert
32,055 PointsWhite space on this page. . .where is it coming from?
http://web.cyzdx7cyyl.treehouse-app.com/1/index.html
I'm doing the first project on the Web Design track, and I'm seeing a white space at the top of the "portfolio" page. It's not showing up on any of the other pages. When I view the site on a mobile browser size and remove the float from the "header" element, the white space goes away. But then I can't see anything when I make the window bigger.
Can someone smarter than me let me know what I did wrong?
3 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Edward,
The gap appears because the floated header hasn't been cleared. If the first element that you add to your section element has a top margin then it produces the gap above the header that you see. In your case, you added a paragraph first which receives a 1em top margin from normalize.css. This is why you don't see it on every page.
To solve the problem you need to clear the float in your wrapper element. Add the clear property to your existing #wrapper rule
#wrapper {
clear: both;
}
This will make sure that your wrapper element will begin below the header where it should.
Edward Seibert
32,055 PointsYep, that was it. I knew it was something small like that. Thank you!
Kevin Murphy
24,380 PointsJason, Edward - Discovered the answer to my related question - Nick does not have a paragraph element as the first element added to section in the index.html page. The first element is a ul. Hmm I wonder if p element was taken out at some point in the project or if that was an artifact I had added to index.html during an experiment. If the latter, unusual that Edward had included p as well. I'll have to review that stage to see.
Jason Anello
Courses Plus Student 94,610 PointsKevin,
I believe Edward included on his own, but he'll have to answer that. This came up in other posts recently and it was all due to adding their own content like p's or h1's which differed from the video. I'd have to review but I think the gap never came up in the videos because the first element was never anything that had a top margin.
It's only when you start trying to customize it yourself that you run into the gap.
Kevin Murphy
24,380 PointsKevin Murphy
24,380 PointsAhhh this is a tricky one. I wouldn't sweat this one at all Edward. Combined, I probably spent at least an hour trying to figure this one out. Turning on and turning off declarations with the inspector like a madman, finally needed to close my workspace and try to forget it. I could see it was related to float but could not determine how. Was going to check/post to the forum if I still couldn't solve after completing the floats stage of CSS Layout Techniques.
I suspected it might have been related to normalize but was lost as to where. The only question I have is that in Nick's code (from project files) there is no rule clearing the floated header and this whitespace issue is not present... Perhaps he removes the top margin on the paragraphs in normalize.css?
Thanks Edward for asking and thanks Jason for the detailed explanation.