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
Arshdeep Singh
Courses Plus Student 8,349 PointsDiv hidden under Foundation 5 top-bar
Hello,
I am trying to make a website with the help of Zurb Foundation 5 and I have run into a problem with top-bar.
My header which includes top-bar and a div containing my contact details is 108px in height.
Suppose I have 3 sections/divs.
My main content sections/divs are 100% in height. The problem which I have is when I scroll down form section 1 to section 2. section 2 hides under the top-bar and leaves a gap of 108px at the bottom of the screen and I see 108px of the 3rd section. I have tried giving body element, a paddin-top of 108px but it doesn't work.
In nutshell, I would like my sections to start where the top-bar is ending. Your help will be appreciated. Many Thanks
2 Answers
Andrew Stelmach
12,583 PointsMight be some strange margin-collapse issue. Try giving various elements (such as your main wrapper div and its parents) a pixel of padding (if they haven't already got any padding), one-by-one, and see if that solves the issue.
Arshdeep Singh
Courses Plus Student 8,349 PointsThank you guys, I was able to solve the problem. It was actually the margin-collapse.
Julian Fields
8,983 PointsJulian Fields
8,983 PointsHi Arshdeep, Try putting your top-bar in its own div, its likely being wrapped by either the body element which is causing your top-bar div to inherit styles from the body or the header. Inspect the element in the browser and look at each div and which styles are being used.