I am creating a website with three coloums. I have set the height to AUTO in CSS. but when i reach a spefic height it goes over it and it wont expand the div tag. I have tried setting the css to 100% and this wont even help. Please could yu help?
body {
margin-left: 0px;
margin-top: 0px;
background-image: url(images/bg.gif);
background-repeat: repeat;
}
.hdr2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #666666;
text-decoration: underline;
}
.hdr3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #666666;
text-decoration: underline;
height: 25px;
}
.hdr4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #666666;
text-decoration: underline;
height: 20px;
}
.hdr1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: #666666;
text-decoration: underline;
}
#container {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #000000;
height: auto;
width: 850px;
margin-right: auto;
margin-left: auto;
background-color: #000000;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
#flash-container-header {
background-color: #000000;
height: 8px;
width: 850px;
}
#top-header-container {
background-color: #000000;
height: 140px;
width: 850px;
margin-right: auto;
margin-left: auto;
}
#logo {
height: 140px;
width: 850px;
}
#menu-container {
height: 30px;
width: 850px;
background-color: #000000;
margin-top: 10px;
}
#button-container {
height: 30px;
width: 850px;
margin-right: auto;
margin-left: auto;
}
#home-flash-banner-container {
height: 200px;
width: 850px;
}
#main-flash-container {
float: left;
height: 200px;
width: 650px;
}
#forex-container {
float: left;
height: 200px;
width: 200px;
}
#forex-box {
height: 180px;
width: 180px;
margin-top: 5px;
margin-right: auto;
margin-left: auto;
}
#index-body-container {
background-color: #FFFFFF;
height: 100%;
width: 850px;
}
#index-box {
min-height:200px;
width: 830px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
height: auto;
}
#index-box-left {
margin: 10px;
float: left;
height: auto;
width: 580px;
min-height:200px;
}
#index-box-right {
margin: 10px;
float: left;
height: auto;
width: 210px;
min-height:200px;
}
#footer-container {
height: 240px;
width: 850px;
margin-top: 10px;
}
#footer-box {
height: 150px;
width: 820px;
margin-top: 15px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
}
/* footer menu */
.box {
display: inline;
float: left;
height: 120px;
width: 160px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 11px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
span.grey {
color: #999999;
font-weight:normal;
font-size: 9px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.footer-text {
height: 12px;
width: 160px;
padding-top: 3px;
padding-bottom: 3px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999999;
}
#footer-notes {
height: 70px;
width: 820px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #999999;
}
#structure-container {
height: auto;
width: 830px;
background-color: #FFCC99;
}
#left-structure {
float: left;
height: auto;
width: 180px;
}
#main-structure {
display: inline;
float: left;
height: auto;
width: 470px;
}
#right-structure {
display: inline;
float: left;
height: auto;
width: 170px;
}
#games-menu-container {
height: auto;
width: 160px;
padding-right: 10px;
padding-left: 10px;
padding-top: 15px;
}
#games-left-banners {
height: 400px;
width: 160px;
margin-top: 25px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 10px;
}
#main-stucture-box {
height: auto;
width: 450px;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;
}
.GamesTitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 30px;
}
.gamesSubTitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
}