I am trying to get my header and footer image too span the entire page. But also have a wrapper container for the rest of my content. I have it close my text will show on my header but not on my footer. What can I do?
Code:
body{
background:#036;
text-align: center;
z-index: 0;
}
html, body {
margin: 0px;
padding: 0px;
}
#wrapper {
background: #FFF;
width: 1000px;
text-align: left;
margin: 0px auto;
position: relative;
}
#header {
height: 111px;
width: 1000px;
color: #FFF;
background: url(images/bgHeader.gif) repeat;
}
#headerBg {
background: url(images/bgHeader.gif) repeat;
height: 111px;
width: 100%;
position: absolute;
z-index: 0;
top: 0px;
left: 0px;
}
#mainNav {
background: #00F;
height: 100px;
width: 1000px;
}
#contentText {
height: 50px;
width: 1000px;
background: #0CF;
}
#mainContent {
background: #CCF;
height: 300px;
width: 1000px;
float: right;
}
#sideBar {
background: #cc2;
height: 600px;
width: 200px;
float: left;
}
#clearFooter {
clear: both;
height: 1px;
width: 1000px;
position: relative;
z-index: 0;
background: #9F0;
margin: 0px;
padding: 0px;
}
#footer {
height: 84px;
width: 1000px;
color: #FFF;
z-index: 1;
top: 581px;
position: absolute;
}
#footerBg {
background: url(images/bgFooter.gif) repeat;
width: 100%;
position: absolute;
z-index: 0;
left: 0px;
height: 84px;
clear: none;
}
HTML Code:
<body>
<!-------- Body Header Backround -------->
<div id="headerBg"></div>
<!-------- Wrapper Tag Start -------->
<div id="wrapper">
<!-------- Begin Header -------->
<div id="header">Content for id "header" Goes Here
<!--- End Header --->
</div>
<!------- Begin Main Navigation ------->
<div id="mainNav">Content for id "mainNav" Goes Here
<!--- End Main Navigation --->
</div>
<!------- Begin Content Text ------->
<div id="contentText">Content for id "contentText" Goes Here
<!--- End Content Text --->
</div>
<!-------- Begin Main Navigation -------->
<div id="mainContent">Content for id "mainContent" Goes Here
<!--- Main Content --->
</div>
<!------- Clear Footer (Used for absolute positioning for footer) ------->
<div id="clearFooter"></div>
<!-------- Begin Footer -------->
<div id="footer">Content for id "footer" Goes Here
<!--- End Footer --->
</div>
<!--- End Wrapper --->
</div>
<!-------- Body Footer Backround -------->
<div id="footerBg"></div>
</body>