Neverside

CSS 100% Height Issue

Okay, so I've created a website mainly with CSS and now I'm trying to make the height stretch to fill 100% of the viewing area... not that complicated but I don't get why it's not working. Please note, I understand that my code is probably not in the simplest form, but it works and is compatible... so I really just want the height to work. Any help is appreciated.

Code:

html,body {
background-color: #515151;
background-image: url(images/bg.jpg);
background-repeat:repeat-x;
text-align: center;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
height: 100%;
}

p {font:14px Arial, Helvetica, sans-serif;}
.head {font: italic 22px "Arial Black"; text-decoration:none; color:white; margin-top: 0px;}

a.nav:link {text-decoration: none; color: white;}
a.nav:visited {text-decoration: none; color: white;}
a.nav:active {text-decoration: none; color: white;}
a.nav:hover {text-decoration: none; color: black;}

a.nav2:link {text-decoration: none; color: black;}
a.nav2:visited {text-decoration: none; color: black;}
a.nav2:active {text-decoration: none; color: black;}
a.nav2:hover {text-decoration: none; color: black;}

#container {
margin: 0 auto;
width: 766px;
height:auto;
height: 100%;
min-height: 100%;
text-align: left;
}
#header1 {
position: relative;
width: 766px;
height: 52px;
background-color: #aaaaaa;
background-image: url(images/home_header1.jpg);
}
#header2 {
position: relative;
width: 766px;
height: 228px;
background-color: #aaaaaa;
background-image: url(images/home_header2.jpg);
}

/* NAVIGATION */

#navigation {
position: relative;
width: 766px;
height: 55px;
background-color: #aaaaaa;
background-image: url(images/home_navbar.jpg);
font:bold 18px Arial, Helvetica, sans-serif; text-decoration:none;
}
#navONE {
float:left;
margin-left: 210px;
margin-top: 29px;
width: 100px;
text-align:center;
line-height:24px;
}
#navTWO {
float:left;
margin-left: 5px;
margin-top: 29px;
width: 100px;
text-align:center;
line-height:24px;
}

/* CONTENT */

#content {
padding-top: 22px;
width: 766px;
background-color: #aaaaaa;
background-image: url(images/home_content.jpg);
}
#main-content {
margin-left: 50px;
width: 666px;
font-family:Arial, Helvetica, sans-serif;
font-size:smaller;
}

___________________

html,body{height:100%;}

___________________

Professional Geek

whoops, you'd already posted that in the OP, sorry dude, didn't see it.

___________________

Professional Geek

Okay, I figured out the problem. It is extending 100% but I didn't set the background of the container div, so it didn't appear that it was. What a ridiculous mistake.

___________________