/*

Set min-height property in the container element below to get the layout to work correctly.

If the container div isset to height:100% everything is fine if the content inside the container
does not force the container to grow larger than the size of the browser window. If the content
goes beyond the end of the browser window it appears to break past the container div because the
container is stuck at 100% of the size of the browser window. Setting the min-height property
fixes the issue.

For further explaination: http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

*/

div#container {
 /*   background-color:#ffffff;
  border-left: 6px solid #000000;
    border-right: 6px solid #000000;
*/
    margin-left: auto;
    margin-right: auto;
    width:975px;
    display: block;
    float: none;
    min-height: 650px;
}
div#containerHeader {
    background: url("../img/scanlines.png") center top transparent;
    margin-left: auto;
    margin-right: auto;
    width:975px;
    display: block;
    float: none;
    height: 105px;
}
div#containerHeaderbg {
    background: url("../img/head_bg.png");
    margin-left: auto;
    margin-right: auto;
    width:100%;
    display: block;
    float: none;
    min-height: 105px;
}
div#containerSubNavbg {
    background: #cfcfcf url(../img/dropdown_bg.png) center top repeat-y; 
    margin-left: auto;
    margin-right: auto;
    width:100%;
    display: block;
    float: none;
    min-height: 0px;	
}
div#containerSubNav {
    background: #c9c9c9 url(../img/menu_bg.png) left -55px repeat-x; 
    margin-left: auto;
    margin-right: auto;
    width:975px;
    display: block;
    float: none;
    min-height: 0px;
}
div#containerNav {
    margin-left: auto;
    margin-right: auto;
    width:975px;
    display: block;
    float: none;
    min-height: 55px;
}
div#containerSlideShowbg {
    background: #e0e0e0 url(../img/brandbox_bg.png) center top repeat-y; 
    margin-left: auto;
    margin-right: auto;
    width:100%;
    display: block;
    float: none;
    min-height: 400px;
}
div#containerSlideShow {
    margin-left: auto;
    margin-right: auto;
    width:975px;
    display: block;
    float: none;
    min-height: 400px;
}
div#containerNonIndexBannerbg {
    background: #e0e0e0 url(../img/brandbox_bg.png) center top repeat-y; 
    margin-left: auto;
    margin-right: auto;
    width:100%;
    display: block;
    float: none;
    min-height: 125px;
}
div#containerNonIndexBanner {
    margin-left: auto;
    margin-right: auto;
    width:975px;
    display: block;
    float: none;
    min-height: 125px;
}
div#containerFooter {
    margin-left: auto;
    margin-right: auto;
    width:975px;
    display: block;
    float: none;
    min-height: 90px;
}
div#containerIndexContent {
    margin-left: auto;
    margin-right: auto;
    width:975px;
    display: block;
    float: none;
    min-height: 375px;
}
/*
You can set the body background to some color to offset the middle column created by the container div:

body {
    background-color: #1a75bc;
}
/*
Then all you have to do is create a container div in  your HTML:

<div id="container" class="clearfix">

</div>