Ok I have been struggling with this for a while, I have a footer set at the bottom of the page. So no matter how little content iso n the page it will always stay nested there.

Visit here and all will become clear: http://www.mstd.eu/

The text you see there are actually 6 paragraphs but you can only see 4 because the rest go behind the footer and THE PAGE DOSN'T SCROLL which is the main point of this topic lol. (using smaller screen resolutions you may see even less than 4 paragraphs).

CSS here: http://www.mstd.eu/css/main.css]

Any ideas?

Ok sorted it, for anyone who is reading this for reference in the future, I removed the bottom: 0; command and replaced it with top: auto;

Seems to work for most browsers.

Not quite. In FF 2.0, when I scroll down your grass is still sitting on top of some of the content, not at the bottom where you want it.

The problem is that you have the footer set to position: absolute. That's not going to work the way you want it.

There is also no need to set the header as position: absolute either. Using the normal document flow, the header is going to be at the top no matter what - unless you put the code for it at the bottom of the page

Remove the absolutes. CLEAR your floats - the clear:both on the footer isn't going to work I'm afraid.. and it's useless on an absolutely positioned element anyway. Clear the float after the ending div for #content and your footer should stick UNDER your content area, no matter how long it gets.

Is it still not working now?

Just had a look in opera and firefox it works fine, but IE 6 is whole different story its all over the place.

O p.s I have to have the header as absolute or the z-index of that and the menu will not work.

Ok.. looking good in FF now

Nice site by the way, I like it

You still have the footer set to position absolute. That is causing your problem. I removed that, put in the clearing element, and the footer stays where it belongs - at the bottom of the page.

.brclear { /* Use a break with this class to clear float containers on both sides */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

<br class="brclear" />
<div id="footer">
<p> &copy; MSTD.eu </p>
</div>

Also add this to the body element:
margin: 0;
padding: 0;

As for your header and the menu, there is an easier way to do that.
Create an actual header div, put your image in it or as a background in the CSS. Create your menu as a UL, and then you can absolutely position the UL over the header where you want it. Make sure you add position:relative to your CONTENT div.

Hi there, that's the way I'd usually go about it (http://tuts.mstd.eu for example), but this is different because the background does not included the 'leaves' as I couldn't find away to make them repeat without big gaps or 'overlapping effect' which looks horrible.

I have completely re-coded it now anyway and I think all issues have been solved for FF, Opera and IE!!!!.

Thanks for your comments been working hard on it wanted something different than everything else, tried to make it stand out from the rest kind of thing.

Once I get it finished will put it up for review