CSS Problem - Height

[hmhair]

I have a problem with CSS height on this particular page i am developing. There are two columns and both stop half way down the page (past the viewpoint). Its kind of random. Everything is set at height:100% (body and container) with a position of relative. When these columns have an overflow put on they react like a frame however when i take the overflow off the content will overflow outside the columns and under the footer. However if i use height: auto it works but they are off different height. There is no height set so I have no idea why they are stopping where they are.

I have had to set these columns to height auto for now. (LeftContent / RightContent).

Any ideas?

CSS

html,body {
height:100%;
position:relative;
background-image:url(../IMAGES/915663_thumbnail.jpg);
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
overflow:auto;
margin:0;
padding:0;
}

#Container {
width:1000px;
height:100%;
min-height:100%;
overfloaw:auto;
margin-right:auto;
margin-left:auto;
position:relative;
margin-top: 10px;
margin-bottom: 15px;
}

#Header {
width:1000px;
height:140px;
float:left;
background-image:url();
background-repeat:repeat-y;
margin:0;
}

.Logo {
width:518px;
height:97px;
float:left;
background-repeat:no-repeat;
background-image:url(../IMAGES/richard_horvitz_logo.png);
}

.mp3 {
width: 240px;
height: 100px;
float:right;
padding: 4px;
margin-top: 30px;
-moz-border-radius:5px;
border-radius:5px;
border: 2px solid #B71718;
background-color:#FFF;
background-position:right;
background-repeat:no-repeat;
background-image: url(../IMAGES/mp3bg.png);
}

.flowplayer {
width: auto;
height: auto;
margin: 0 0 15px 0;
}

#SliderWrapper {
width: 990px;
height: 256px;
float: left;
margin-bottom: 40px;
background-color: #ffffff;
border: 3px solid white;
-moz-border-radius:5px;
border-radius:5px;
text-align:center;
}

#slider {
position:relative;
float: left;
width:990px; /* Change this to your images width */
height:256px; /* Change this to your images height */
background:url(../IMAGES/loading.gif) no-repeat 50% 50%;
}

#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}

#slider a {
border:0;
display:block;
}

#LeftContent {
width:580px;
height:auto;
float:left;
padding: 10px;
overflow:auto;
clear: both;
-moz-border-radius:5px;
border-radius:5px;
background-color:#FFF;
margin: 10px 5px 5px 0;
border: 2px solid #66CCFF;
}

#RightContent {
width:360px;
height:auto;
float:left;
overflow:auto;
padding: 10px;
-moz-border-radius:5px;
border-radius:5px;
background-color:#FFF;
margin: 10px 0px 5px 5px;
border: 2px solid #66CCFF;
}

#SubContent {
width:970px;
height:auto;
float:left;
padding: 10px;
-moz-border-radius:5px;
border-radius:5px;
background-color:#FFF;
margin: 10px 0px 5px 5px;
border: 2px solid #66CCFF;
}

.games {
width: 118px;
height:139px;
float: left;
margin: 1px;
}

#game_wrapper {
width: auto;
height: auto;
float: left;
margin: 10px 0 10px 0;
}

#Footer {
width:1000px;
height:200px;
float:left;
clear:both;
overflow:auto;
background-color:#FFFFFF;
-moz-border-radius:10px;
border-radius:10px;
border: 2px solid #66CCFF;
margin:10px 0 0;
background-repeat: no-repeat;
background-image:url(../IMAGES/footerbg.png)
}

#TopIcons {

}

.img {
margin: 10px;
float: right;
}

.imgSub {
margin: 10px;
float: left;
}

/*LINK STYLES*/

a.content:link {
font-family:'Tahoma', Geneva, sans-serif;
font-size:0.9em;
font-weight:700;
color:#B71718;
}

a.navigation a:hover, a:active {
background-repeat: no-repeat;
}

a.navigation:link {
font-family:'Tahoma', Geneva, sans-serif;
font-size:0.9em;
font-weight:700;
color:#714C3D;
display:inline;
}

a.navigation a:hover, a:active {
background-repeat: no-repeat;
background-image: url(../IMAGES/contact_hover.png);
}

[hmhair]

Anyone?

[WebsiteTutorial]

Change height:auto; to min-height:???px;

is your LeftContent and RightContent supposed to be scrollable by scrollbar
if not change overflow:auto; to overflow:hidden;

also change #Container overfloaw:auto; to overflow:hidden;

[hmhair]

Thank you for your reply WebsiteTutorial

I have tried overflow:hidden on both columns and the container as well as min-height:100% and it cuts the top and bottom of the page off!

[Cory R]

Can we see the HTML layout?