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
TIAGO SANTOS
2,450 Pointswhite spacing on top of the page
When I add the float left property a white spacing appears on top of the page. Can anyone tell me why ?
header{
float:left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width:100%;
}
if i delete the float left property the page looks fine. I found someone here who asked a similar question but no answers.
Thanks!
Conrad Turuk
5,144 PointsTwo things I can think of:
1) try adding clear: both; to your header css?
2) preview this in google chrome and hit ctrl+shift+i. From here you can inspect individual elements and find out what element is showing up above the image. To inspect an element try:
Mac - ⌘ + Shift + C OR Windows / Linux - Ctrl + Shift + C OR F12
Hope that helps.
7 Answers
Armin Memic
Courses Plus Student 7,481 PointsFor me it was the wrapper in the css, fixed it by adding clear: both;
wrapper{
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
clear: both;
}
Mike Kazmer
9,390 PointsI was having the same problem and this did the trick. Can anyone explain why this was the fix? Why was it not necessary for everyone?
Farzana Sarangi
3,219 PointsI was using Normalize, so its strange it didn't work. But I am brand new to this, so I may have done something wrong along the way.
Gemma Weirs
15,054 PointsNormalize isn't really a reset as such, so it doesn't do anything to address the extra whitespace issue. Hence the need to try the various fixes for that issue.
TIAGO SANTOS
2,450 PointsConrad turuk when i preview the code on chrome i saw there was a margin on the h3 tag but i didn't declare it explicitly and i solved this by adding margin zero to h3 tag. I wonder if this was default from the browser or the normalize.css? And if so, why adding a margin to the h3 tag underneath the nav would push the nav bar down ?
Here is the snapshot: https://w.trhou.se/jr6j2u7hos
Conrad Turuk
5,144 PointsI personally did not experience any whitespace above the header or h3 element so I'm think it might have been a browser issue? The clear rule would have also worked in this case I'm pretty sure. I have linked a fairly good answer below as to how floats and clears work:
http://stackoverflow.com/questions/12871710/what-does-the-css-rule-clear-both-do
Quet Quartey
5,525 PointsIn my main.css file I adjusted the selected id wrapper margin from 40px to 0px, that seemed to get rid on the space on top
wrapper {
max-width: 940px; margin: 0px auto; padding: 0 5%; }
is there a better way to get rid of the white spacing at the top of the page? adding a 0 margin to the h3 tag didn't work for me nor did adding "clear:both" to the header css.. open to suggestions
Gemma Weirs
15,054 PointsAdding clear:both; to #wrapper solved this issue for me. But I'm wondering why Nick hadn't, up to now, included that in the video with an explanation.
Edit: it seems to me that Nick is using Safari? So I think the solution Nick used works for Safari, but not for Chrome. I'm using Chrome so I had to use clear:both; on #wrapper to get rid of the unwanted margin at the top of the page. After a quick Google, it seems Safari and Chrome handle margins a bit differently. I could be wrong though.
Farzana Sarangi
3,219 PointsHi, I am using Firefox and still have the white spacing at the top of the page.
Gemma Weirs
15,054 PointsDo you know how many extra pixels there are at the top of the screen? You can find out using the Web Developer addon. Once you know exactly how many pixels to remove, use a negative margin to remove them e.g. margin: -22px. I'm sorry I don't know of other ways to deal with the problem specifically for Firefox.
Armin Memic
Courses Plus Student 7,481 PointsI tried your code in the latest version of firefox and chrome. It did not have any space at the top of the page, so your code worked fine for me. Weird.
Farzana Sarangi
3,219 PointsArmin: I updated to the latest version, but that didn't fix it. Gemma: I changed the margin to a negative margin and it fixed it. Thank you both for your help.
Gemma Weirs
15,054 PointsNo problem but it seems there are multiple possible fixes depending on your markup and the browser's default styling, as well as any resets you've applied. I used Normalize which preserves many of the default styling browsers tend to apply, so it's worth researching that to learn about their intricacies and those of the specific elements you use in your markup. I'm relearning CSS after an extended break, so this is something I'm having to do myself. Happy to help where I can. :)
Philip Gales
15,193 PointsPhilip Gales
15,193 PointsTake a snapshot of your workspace by clicking the camera icon in the upper right. You can then share the link they give you. This way, someone can see all of your code and visually see the problem.