CSS & Dreamweaver - fragmented on screen

[triniti_allen]

CSS Help - Page fragmented
Hello, I am new here, so please excuse my naivety... I have searched online for the better part of 3 days now to try to figure out what I am doing wrong, and I can't figure it out. Hopefully someone can help.
I am new to CSS and I am using Dreamweaver. I am trying to set up what I think is a simple page layout. I want the footer to be on the bottom, and the text to fill the main area on the page.

Here is a link to what I am getting:
http://www.superbilliardsexpo.com/testBadCSS.html

The top starts off good, but the bottom falls apart. The container is not supposed to be bright teal colored, I just did that so I can see where it is "ending", which I do not understand because it is set to 100% height, with a minumim of 1200px - for smaller pages and testing purposes really... Eventually, the container will have no fill color so that the bdy BG properties will show through.

Here is the CSS from the style sheet I am using - I took the top part from a site I saw explaining how to make 100% height pages:

Any help is super appreciated!! If anyone is a poolplayer out there, you may recognize the site and or names, I can get you an autograph for some help, it's my dad

Thanks again!



@charset "UTF-8";
html, body, #container {
min-height: 100%;
width: 100%;
height: 100%;
}

/*
* The "height" above is a hack for IE5+/Win. Below we adjust
* it using the child selector to hide from IE5+/Win
*/

html>body, html>body #container {
height: auto;
}

body {
background-image: url(images/bgpattern30.jpg);
margin: 0px;
padding: 0px;
}
#container {
position:relative;
width:100%;
z-index:1;
height: 100%;
min-height:1200px;
background-color: #0FC;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#header {
position:absolute;
left:0px;
top:0px;
width:100%;
height:200px;
z-index:2;
background-color: #798551;
background-image: url(images/head.jpg);
background-repeat: no-repeat;
background-position: center;
}
#Main {
position:relative;
top:260px;
width:800px;
height:100%;
min-height:900px;
z-index:10;
background-color: #e5e1d9;
margin-right: auto;
margin-left: auto;
border-right-style: ridge;
border-left-style: ridge;
border-right-width: medium;
border-left-width: medium;
border-left-color: #3365a2;
border-right-color: #3365a2;
overflow: visible;
}
#footer {
position:relative;
width:100%;
height:74px;
z-index:40;
background-color: #74804d;
bottom: 0px;
left: 0px;
margin: 0px;
padding: 0px;
}
#MenuBar {
position:absolute;
left:0px;
top:200px;
width:100%;
height:35px;
z-index:15;
border-top-style: dotted;
border-bottom-style: dotted;
border-top-color: #FFF;
border-bottom-color: #FFF;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
background-image: url(images/MenuBarBG.jpg);
background-repeat: repeat;
text-align: center;
}
#facebook {
position:absolute;
width:200px;
height:699px;
z-index:13;
background-color: #FFF;
right: 3px;
top: 94px;
}
#BannerAd {
position:relative;
top:0px;
width:600px;
height:90px;
z-index:2;
background-color: #999;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
left: 200px;
}
#MainContent {
position:absolute;
left:17px;
top:155px;
width:570px;
height:774px;
z-index:23;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
#contact {
position:absolute;
left:0px;
top:0px;
width:200px;
height:90px;
z-index:20;
background-color: #036;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
color: #FF0;
padding: 0px;
}
#SubMenu {
position:absolute;
left:0px;
top:235px;
width:100%;
height:25px;
z-index:41;
background-image: url(images/SubMenuBar.gif);
background-repeat: repeat;
border-top-width: thin;
border-bottom-width: thin;
border-top-style: dotted;
border-bottom-style: dotted;
border-top-color: #FFF;
border-bottom-color: #FFF;
}
#sponsors {
position:absolute;
width:582px;
height:52px;
z-index:22;
left: 8px;
top: 95px;
}



Just thought of some more... I want to set up the page so that I can type text in the main area there, called "MainContent".. Some pages will have more text than others, isnt there a way to set it up so the area just "grows" as I type in it, like what occurs when you type in a table cell? I dont want to overflow:scroll, I just want the pages to get longer, using browser scroll bar... Not sure if this makes sense.

Basically, I just want to have a general area designated for writing in, I dont want everything set by predetermined box sizes. I thought height:100% would take care of this, but that doesnt seem to be doing it... I don't know how to explain this well, but I think looking at my sample page you will understand my intent.

Thanks agian for any help - I assume I am doing something drastically wrong, right from the beginning, but I don't know what...