I am having trouble getting the #main div (which includes the #description div) below the header, while keeping the header fixed to the top of the page (top margin of 0). For some reason my code is pushing the header down maybe ~20 pixels and the #main div is appearing on the same block.
It looks like the #main would appear as a new block (and the #description div would appear within the #main) but it doesn’t..
Whats happening is the #header AND #main are on the same block right now and they are being pushed from the top with a margin (no idea why).
I think I need to get the #main on its own block (under the #header) to stop all these problems but I am not sure how. I also want the #main div and all of its contents to appear under the #header div (which it is not doing right now)
How do I go about positioning the #main (and everything inside) under the #header when it scrolls?
Is there a way to make the site like it is "unscrollable" until there is content there? Right now you can scroll to see the full height of #main because I have gave it a height. How can I have the BG stay there and not scroll… BUT scroll whenever there is content? Hope that makes sense! I thought about putting it simply in the body properties but I didn’t know if that would do it.
Is there a reason why the margin 0 and padding 0 didn’t have the same effect with the body tag as it did in positioning it above the body tag? Obviously there is a reason it is just a little confusing ha. Only confusing because it worked until I added things to the main div.
My final concern is the #main div. It is still positioned weirdly. If I go in Firefox and turn in Firebug and highlight the main div… It takes up roughly above 50px from the top of the screen and covers the header space as well. My thinking was that if I set the height to 100% that it would span between the header and the footer… I’m am not too sure why it is doing what it is doing.