Forum Moderators: not2easy
<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>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Fixed Footer</title>
<style media="screen" type="text/css">
html,
body {
margin:0;
padding:0;
height:100%;
background-image: url(img/bkgdContent1.jpg);
z-index:0;
}
#container {
position:relative;
width: 900px;
margin:0 auto 100px auto; /* bottom margin set to height of #footer */
background-color:yellow;
}
#header {
padding:0 10px;
background-image: url(img/transparentbanner.png);
background-color:#80a080;
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;
background-color:pink;
}
#sidebar {
width: 200px;
float: left;
padding: 30px 0;
background-color:lightblue;
}
#footer {
position:fixed;
bottom:0; left:0;
width:100%;
z-index:1;
height:100px; /* Height of the footer */
background-image: url(img/footer4.png);
background-repeat: repeat;
background-color:#c0c0c0;
}
/* 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">
<p>Header</p>
</div><!-- end #header -->
<div id="sidebar"><p>Sidebar</p>
</div><!-- end #sidebar1 -->
<div id="body">
<!-- Body start -->
<p>Body Start</p>
<p>More Body Text</p>
<p>Body Last</p>
</div><!-- end #body -->
<div class="clearfooter"></div>
</div><!-- end container -->
<div id="footer">
<div id="footer_text">
<p><strong>Send Email</strong></p>
</div><!-- end #footer_text -->
</div><!-- end #footer -->
</body>
</html>
[edited by: alt131 at 7:43 pm (utc) on May 17, 2011]
[edit reason] Thread TIdy [/edit]
css
<style type="text/css">
* {padding: 0; margin: 0; } /*removes margins and padding to reduce cross-browser differences */
html, body {
background-color: #ccc;
height:100%; /*applies a height to the html and body to provide a measurement for later percentage heights */
}
/* Body cannot be used as the container as you want a full-width footer, so wrap everything (except footer) in a container to establish the max-width of the page, and give the footer something to measure from, */
#container {
max-width: 770px; /* set to stop re-flowing issues when browser resized very narrow*/
margin: 0 auto;
min-height:100%; /*makes sure container will always be a minimum of 100% of the viewport*/
}
.header {
padding: 0 10px;
background-image: url(myimage.jpg);
height:270px;
}
.sidebar {
width: 200px;
float: left;
padding: 30px 0;
}
.content {
padding:15px;
margin: 0 1.5em 0 13em;
font-family: Arial, Helvetica, sans-serif;
color: #06F;
background: url(myimage.jpg) no-repeat right bottom;
margin-bottom:100px; /* make space for the footer */
}
.footer {
height:100px;
width:100%;
margin-top:-100px; /* pull the footer back up over the content*/
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
/*if you need to support ie6 - which doesn't understand min/max*/
#container {height:100%;width:770px;}
</style>
<![endif]-->
</style>
html
<div id="container">
<div class="header"> <a href="#"><img src="1.jpg" alt="logo" /></a> <h1>title</h1> </div>
<ul class="side-bar"><li>My List</li></ul>
<div class="content">
<h2>heading</h2> <P>LAST SENTENCE</p>
</div><!--content-->
</div><!--container-->
<div class="footer"> <p>Footer text goes here</p> </div>
Im still trying to work out how to post as "code" but the code tags didnt work in my 1st postAh yes ... a WebmasterWorld "gotcha" - code only works for one line ;) Try quote.
the page seems to be working quite fine on firefox but on opera and IE the footer is below the viewportOk, some thoughts:
