Ok I left out an i in height in the #main css – fixed that and all of my #main content spilled over the background SO – i used the min-height in the #main tag and that fixed the body and then went to use the same trick in sidebar as it is the next child element but nuthin! my sidebar still wont fill the void!
html, body {
height: 100%;
}
*{margin:0;padding:0;}
body {background-color:#000000; font:13px Trebuchet MS;}
#wrapper {width:950px; margin:0px auto; height:100%;}
#main {
background-color:#FCF9C2;
padding:5px;
width:940px;
min-height:100%;
height:auto;
padding-bottom:20px;
}
/* Hack for IE */
* html #main {
height: 100%;
}
/* End IE Hack */
#sidebar2{
width:200px;
min-height: 100%;
height:auto;
background-color:#993300;
float:right;
}
/* Hack for IE */
* html #sidebar2 {
height: 100%;
}
/* End IE Hack */