'Height:auto' Browser Differences Butchering my Design

[ICO]

I’m having some frustrating problems with my site design, it comes up right in Internet Exploerer but Firefox butchers it.

Site Link: http://www.november21st.com/New/index.php
CSS Link: http://www.november21st.com/New/styles.css

My document consists of 6 divs:
#Background: Displays a background image, holds all site content but not the footer.
#Page: Holds a header image and the rest of the site content.
#Menu: A side menu, holds an unordered list displaying Link1-Link4.
#Content: Holds text, sits to the right of the Menu.
#End: A "footer" for the Page div.
#Footer: document Footer

My problem involves #Content and #Menu along with #Page

The #Content and #Menu are supposed to sit inside #Page side by side with #Page’s creamy colored background expanding to hold them. IE does this right. Firefox fails to do so displaying the document’s black background.

Note: When specifying a pixel height for #Page, it works right in both browsers, but I need my height on auto to expand with the content. I tried specifying 100% as the height, doesn’t seem to look any different from auto in both browsers.

[ICO]

I read another topic here I haven't noticed bellow and found the overflow:auto; property. It works a bit better but now I have a scroll bar.

*ponders*

And one of my footers stop looking like a footer.

*goes back to fixing*

[ICO]

I think it's starting to look like I need to rewrite my problem. My footer's the only problem now, wow, what a waste of a topic.

[BonRouge]

#End {
border:1px solid #A5977E;
background-color: #B6A78B;
color: #6C6049;
position: relative;
clear:both;
}

[ICO]

Thanks, its fixed now! Read your post in meltingInPhoenix's topic, the link helped loads!