Help with some simple CSS messing with layout of my site

[nStyle]

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)

[TheDoc]

Do you have a link to the site where this problem is occurring?

[nStyle]

My apologies! I read that "have your link ready" and it totally went in eye and out the other ;)

http://www.basedonstyle.com/test

[TheDoc]

Are you referring to the black gap at the very top of the screen?

If so, always remember to do a proper reset (which will fix this). You can do the Meyers method if you want, but personally, I just toss a universal:

Code:

* { margin:0; padding:0; }

into my CSS file.

[nStyle]

Thanks for the fast reply!

I will try this as soon as I can.

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.

[TheDoc]

Remove the height from #main, add the background to the body.

[nStyle]

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.

[nStyle]

bump

[TheDoc]

Remove the height from the main div, you don’t need it.

It was probably the fact that you hadn’t added the reset to the HTMl as well:

html { margin:0; padding:0; }

That’s what I just go with the universal * reset.

[nStyle]

But why is the #main div on top of the header. I would think it would appear on a new line? It doesn’t…

[TheDoc]

"nStyle" wrote:

But why is the #main div on top of the header. I would think it would appear on a new line? It doesn’t…

Using percentages, especially 100% height, is always tough.

I assume it’s trying to be 100% of the browser’s window, not of the space between the divs.

[nStyle]

But is there a way to make the height span only between the header and footer? To me, it would make much more sense for coding that way.

[TheDoc]

"nStyle" wrote:

But is there a way to make the height span only between the header and footer? To me, it would make much more sense for coding that way.

You could do 100% height and then just add top and bottom margins to make sure they don’t cross over.

But, there is no point in doing 100% height. The content will simply fill up the space that it needs to, between the header and footer.

[Author]

Posts