Page is a not externally linkable
TracidTrax - 11:47 pm on Feb 1, 2011 (gmt 0)
After spending many hours on this searching the internet and reading tutorials I still can't get the footer to stay at the bottom of the page.
What I have is a container with all the content in it and i would like a footer to stay at the bottom of the page always, even if scrolling is needed. The footer must be outside the container as i want it to span across the entire page, not just the width of the container which is 900px wide.
I can get the footer to stay at the bottom if the footer is inside the container, but that is not what i would like, I need the footer to be outside of the container.
Heres what it looks like:
[IMG]http://i53.tinypic.com/30ijih0.jpg[/IMG]
<head>
<title></title>
<style media="screen" type="text/css">
html,
body {
margin:0;
padding:0;
height:100%;
background-image: url(img/bkgdContent1.jpg);
}
#container {
min-height:100%;
position:relative;
width: 900px;
margin:auto;
margin-bottom: -100px;
}
#header {
padding: 0 10px;
background-image: url(img/transparentbanner.png);
height:270px;
}
#body {
padding:15px;
margin: 0 1.5em 0 13em;
padding-bottom:100px; /* Height of the footer */
font-family: Arial, Helvetica, sans-serif;
color: #06F;
background-image: url(img/Silhouette2.png);
background-repeat: no-repeat;
background-position: right bottom;
}
#sidebar {
width: 200px;
float: left;
padding: 30px 0;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:100px; /* Height of the footer */
background-image: url(img/footer4.png);
background-repeat: repeat;
}
/* other non-essential CSS */
#footer_text {
width:100%;
position:absolute;
bottom:0;
text-align: center;
color: #FFF;
font-size: 14px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.main_header_text {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 36px;
color: #FFF;
}
.clearfooter {
height: 100px;
clear: both;
}
</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#container {
height:100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="sidebar">
<!-- end #sidebar1 --></div>
<div id="body">
<!-- Body start -->
<!-- Body end --></div>
<div class="clearfooter"></div>
</div>
<div id="footer">
<div id="footer_text">
<p><strong>Send Email</strong></p></div>
</div>
</div>
</body>
</html>