|
CSS - Css Footer Positioning
Hi
I've been coding amateur websites and PHP applications for years, but I recently decided to try and learn how to design a website professionally - that is, using Photoshop to mock it up and create a logo, and holding the contents in place using CSS. I'm very pleased with the result (which can be found at haruhi.kg13.com), but there is one bug that I've been trying in vain to resolve, and that is the footer. It took a while to make the footer stay in place, and now it permanently stays on top of any content, which is obviously an issue where I intend to be creating rather long pages without the use of iFrames or any other page-within-a-page technique. Essentially, what I want is for my footer to stay at the bottom of the page (not the browser window) with a 15px margin above it so that I can display as much text as I like on any given page. It's best displayed on the "legal" page, if you increase the font size a bit. Here is my source code. I know some of the CSS elements look unnecessary; I've tried several tutorials for this problem, and this one told me to add a lot of CSS classes. CSS: Code: main.css @charset "utf-8";
/* CSS Document */
body {
font: 9pt/17pt arial;
margin:0;padding:0;
height:100%;
background-image: url(../img/sitebg.gif);
background-repeat: repeat-x;
background-color: #dbe4f7;
margin-bottom:10px;
}
#clear {
clear:both;
}
p {
font-size:14px;
}
a {
color:#FFFFFF;
}
#content {
position:fixed;
margin-left:200px;
margin-right:200px;
/* margin-bottom:30px; */
margin-top:20px;
line-height:25px;
min-height: 100%;
margin-bottom: -36px;
}
* html #content {
height: 100%;
}
#content p {
text-align:right;
font: 12pt/14pt arial;
}
#content a:link {
display:inline;
color:#0094FF;
text-decoration:none;
}
#content a:hover{
display:inline;
background:#004A7F;
text-decoration:none;
}
#header_contain {
width:935px;
height:111px;
background-position:bottom;
display:block;
margin:0 auto;
}
#header_contain p.logo {
display:inline;
width:339px;
height:111px;
text-indent:-5000px;
float:right;
background-image: url(../img/logo.png);
}
#header_contain p.logo a {
display:inline;
width:339px;
height:111px;
text-indent:-5000px;
float:right;
background-image: url(../img/logo.png);
}
ul#top_header {
font-size:18px;
list-style-type:none;
float:right;
margin:0;padding:0;
clear:right;
margin-top:-60px;
margin-right:180px;
}
ul#top_header li {
float:left;
margin-right:50px;
}
ul#top_header li a {
display:block;
color:#FFFFFF;
text-decoration:none;
}
ul#bottom_header {
list-style-type:none;
float:right;
margin:0;padding:0;
clear:right;
margin-top:17px;
}
ul#bottom_header li {
float: left;
margin-right: 15px;
}
ul#bottom_header li a {
display:block;
font-size:14px;
text-decoration:none;
}
#footer-spacer {
height: 36px;
}
#footer {
display:block;
position:absolute;
bottom:0;
width: 100%;
background:#c3cdda;
height:36px;
}
ul#bottom_footer {
list-style-type:none;
float:right;
margin:0;padding:0;
clear:both;
margin-top:8px
}
ul#bottom_footer li {
float:left;
margin-right: 15px;
}
ul#bottom_footer li a {
display:block;
font-size:18px;
text-decoration:none;
bottom:15px;
}
#top {
position: absolute;
}
HTML (ignore the .php file extension, I'm generating content using includes) Code: index.php
<link href="css/main.css" rel="stylesheet" type="text/css" />
<title>KieranJones.org | Home</title>
</head>
<body>
<div id="top"></div>
<div id="header_contain">
<p class="logo"><a href="index.php">KieranJones.org</a></p>
<ul id="top_header">
<li><a href="index.php?action=blog">Blog</a></li>
<li><a href="index.php?action=portfolio">Portfolio</a></li>
<li><a href="index.php?action=contact">Contact</a></li>
</ul>
</div>
<div id="content">
<?PHP include("action.php"); ?>
<div id="footer-spacer"></div>
</div>
<div id="footer">
<ul id="bottom_footer">
<li><a href="index.php?action=advertising">Advertising</a></li>
<li><a href="index.php?action=legal">Legal</a></li>
</ul>
</div>
</body>
</html>
Thanks Kieran Similar TutorialsI have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo Ok, I have this page where the footer <div> isn't paying attention to where the menu <div>'s are. If you look -> Here, you will see how the site is meant to look, i.e. the footer is below everything else. But, if you look -> here, you will see that if the contents of the main <div> are shorter than the menu ones, the footer follows it up the page, and goes underneath the two menu divs. Both menu's are absolutely positioned, so I don't really know how to get the footer to notice they are there, and position itself accordingly... Any thoughts anyone? Cheers, Jon. Is there a way to get a footer always to appear at the bottom of the browser window? Instead of just appearing under however much content is showing above it? please? Hello everyone! First time poster here! I am having trouble getting a footer to position itself at the bottom of the page. I have tried to use the "bottom: 0;" and it pushes it to the bottom of the screen, but does not give the footer a static position in the page. Here is my css file: Code: body {
margin: 16px 0 0 35px;
padding: 0;
background: fixed #738b41 url(../images/bk.jpg) no-repeat left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
}
h1, h2 {
font-weight: bold;
color: #FFFFFF;
}
h1 {
margin: 0 20px 0 20px;
font-size: 150%;
}
h2 {
margin: 15px 20px 10px 0;
font-size: 125%;
}
p {
margin: 20px;
text-align: left;
text-indent: 0;
}
img {
border: none;
margin: 0 auto;
}
img.left {
float: left;
margin: 0 auto;
padding: 0 25px;
}
img.right {
float: right;
margin: 0 auto;
padding: 0 15px 0 5px;
}
img .left1 {
float: left;
margin: 0 auto;
padding: 10px 0 0 0;
}
img .right1 {
float: right;
margin: 0 auto;
padding: 10px 0 0 0;
}
#wrapper {
width: 960px;
margin: 0 auto;
padding: 0;
}
/* Header */
#header {
clear: both;
width: 960px;
margin: 0 auto;
padding: 0;
}
#logo {
width: 215px;
height: 215px;
margin: 0 auto;
float: left;
}
#social {
width: 300px;
height: 150px;
margin: 0 auto;
float: right;
}
#social .facebook {
width: 110px;
height: 150px;
margin: 30px 0;
float: left;
}
#social .twitter {
width: 128px;
height: 150px;
margin: 25px 25px 0 0;
float: right;
}
#menu {
width: 675px;
height: 65px;
margin: 10px 0;
float: right;
background: url(../images/menu.png) no-repeat;
}
#menu ul {
margin: 0;
padding: 0 25px;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
margin: 0 auto;
padding: 20px 20px 0 20px;
text-decoration: none;
font-weight: bold;
font-size: 110%;
color: #c8d8a7;
}
#menu a:hover {
background: url(../images/barn.png) no-repeat left 105%;
}
#content {
width: 960px;
margin: 0 auto;
padding: 22px 0;
background: url(../images/content_top.png) top left no-repeat;
clear: both;
}
#main {
width: 960px;
margin: 0 auto;
padding: 0;
position: absolute;
background: url(../images/content_middle.png) left repeat-y;
}
#main .textarea {
width: 605px;
margin: 0 auto;
padding: 5px 0;
float: left;
}
#main .sidebar {
width: 345px;
margin: 0 auto;
padding: 0 5px 15px 0;
float: right;
}
#main .sidebar .lower {
margin: 0 12px 0 0;
padding: 10px 0 10px 30px;
background: url(../images/side-bar-bk.png) top right no-repeat;
position: relative;
clear: both;
}
#footer {
padding: 0 10px 0 10px;
}
#footer p {
font-size: 10px;
color: #FFFFF;
}
#footer .copyright {
float: left;
}
#footer .crosspoint {
float: right;
}
I know this is probably something very simple, but I have stared at it so long that I need a fresh set of eyes. In case you need it, here is the HTML as well: Code: <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="keywords" content="" /> <meta name="description" content=""/> <meta name="category" content="Agriculture"/> <meta name="rating" content="General"/> <meta name="GOOGLEBOT" content="INDEX, FOLLOW"/> <meta name="ROBOTS" content="INDEX, FOLLOW"/> <meta name="revist-after" content="15 days"/> <meta name="author" content="Crosspoint Creative Marketing, LLC"/> <link href="css/default2.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="header"> <div id="logo"> <a href="#"><img src="images/logo.png" alt="Blake Dairy Farms: Knoxville's Corn Maze Destination!"/></a> </div> <div id="social"> <div class="facebook"> <a href="" title="Connect with our Corn Maze crew on Facebook"> <img src="images/fb.png" alt="Like us on Facebook!" /></a> </div> <div class="twitter"> <a href="" title="Help promote our Corn Maze on Twitter!"> <img src="images/twitter.png" alt="Connect with us on Twitter!" /></a> </div> </div> <div id="menu"> <ul> <li class="a"><a href="#">Home</a></li> <li><a href="the-farm.html">The Farm</a></li> <li><a href="our-corn-maze.html">Our Corn Maze</a></li> <li><a href="about-the-blakes.html">About the Blakes</a></li> <li><a href="contact-us.html">Contact Us</a></li> </ul> </div> </div> <div id="content"> <div id="main"> <div class="textarea"> <h1>Welcome to Blake Dairy Farms online!</h1> <p><img src="images/blake-dairy-farms.jpg" alt="Blake Dairy Farms" class="right" /> Thank you for visiting our site! We look forward to connecting with you and hope to be your choice for agritourism in Knox county.</p> <p>Blake Dairy is a first generation farm located in beautiful Strawberry Plains, TN just an hour away from the Smokey Mountains. We have been in business for over ten years and have been very blessed with growth we have seen during that time.</p> <p>Have a look around our website. We have a blog that we try to keep updated to let you all know what is going on here at the Dairy. We are also on Facebook and Twitter so be sure to connect with us there as well!</p> <p>If you live here in Knox county, be sure to keep up with our Corn Maze and Farm Festival this September and October. We are putting together a fun and educational event that you can bring the whole family out to and spend the entire day. Check out our Corn Maze Page for more information and dates. If you would like to learn more about our operation here, don't hesitate to contact us!</p> <a href=""><img src="images/dairy-farmers-of-america.png" alt="Dairy Farmers of America" class="left" /></a> <img src="images/thanks-knoxville.png" alt="Thanks for checking out our Corn Maze!" class="right" /> </div> <div class="sidebar"> <img src="images/dairy-farm.png" alt="Blake Dairy Farm: Knox County's Fall Festival and Corn Maze Destination" class="right" /> <div class="lower"> <h2>Our Corn Maze Sponsors:</h2> <a href="" title="Corn Maze Sponsor: Crosspoint Creative Marketing"> <img src="images/crosspoint-creative-marketing.png" alt="Crosspoint Creative: Corn Maze Sponsor" class="left1" /></a> <img src="images/knox-farmers-co-op.png" alt="Knox Farmer's CO-OP: Corn Maze Sponsor" class="right1" /> <p>Be sure to visit their websites! They have helped to make this event possible.</p> </div> </div> </div> </div> <div id="footer"> <p>Testing</p> </div> </body> </html> Thanks for taking a look and I appreciate any help whatsoever! Hi there, I was wondering if someone could help me a with a problem with my footer positioning. I'm building my website he thecoastguard.co.uk My footer is sitting to the right of the sidebar. I want it to be centered. The current CSS is: #footer {float:left; border-top: 1px solid #cccccc; padding: 0; margin: 20px 0 0 0; clear:both; width: 850px;} #footer p {margin: 0; padding: 5px 10px; text-align: center;} I've tried changing the float to right. That works in firefox but not in IE. Center float does nothing at all. any advice would be much appreciated. Thanks! Siobhan Hi there, Was hoping somebody could help me. I've been working on a new footer for a company and have got a positioning issue with it. If the content of the page is rather long, it will go under the footer with the footer displaying over the top and the content carrying on below it rather than moving the footer down as long as it needs to. I've tried playing with the CSS of the DIV ID 'content' which the content sits in, and the DIV ID 'footertest' which is the footer and the below displays a test page that is the closed I have it to work. The long list of 'testing' at the bottom should obviously push the footer down not go underneath and beyond it down the page. The current CSS for 'content' and 'footertest' is as follows: #content { width: 512px; padding:3px; margin:5px; margin-left:18px; float: left; /*border:1px solid #000000;*/ } #footertest { background-image:url(/images/footertest.png); height:70px; width:951px; margin-left:14px; position:absolute; } I'm unable to post URLs yet so cannot provide the link to the test page I have setup. Hi! i'm trying to position footer at the very bottom. this example does it as expected (if the page is longer than viewport, footer will be at the end of page): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
}
#content {
padding: 10px;
background-color: #ff8080;
}
#footer {
position: absolute; /* Needed for Safari */
padding: 10px;
background-color: #aa3939;
width: 75%;
}
#footer h1 {
padding-bottom: 0;
}
h1, p {
margin: 0;
padding-bottom: 1em;
}
h1 {
font-size: 12px;
line-height: 1.5em;
}
-->
</style>
<script type="text/javascript">
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('content').offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'absolute';
footerElement.style.top = (windowHeight - footerHeight) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//-->
</script></head><body>
<div id="content">
<h1>Content</h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div style="position: absolute; top: 810px;" id="footer">
<h1>Footer</h1>
</div>
</body></html>
but when i try to add left/right boxes, it fails. try to scroll down the page (footer is placed at the bottom of viewport, not page): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
}
#head
{
padding-left:20px;
padding-top:20px;
padding-right:20px;
background-color: #FFF;
background-image: url('/public/images/header-background.gif');
background-repeat: repeat-x;
background-position: bottom
}
#logo
{
height: 100px;
background-image: url('/public/images/header.jpg');
background-repeat: no-repeat
}
#content
{
}
#leftcontent
{
float:left;
width:67%;
margin:10px;
padding:30px 30px 70px 30px;
border: 1px solid #000;
background-color: #33251C
}
#leftcontent h1
{
color: #936FC4
}
#leftcontent h2
{
color: #FFF
}
#rightcontent
{
margin:15px
}
p, pre
{
margin:0px 30px 10px 30px
}
#rightcontent p
{
font-size:10px;
margin-left:0px
}
#navcontainer
{
margin: 0;
padding: 0;
height: 22px;
font: 11px Verdana, sans-serif;
width: 100%;
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
list-style-type: none;
background: #FFF
}
#navlist li
{
float: left;
margin: 0;
padding: 0;
width: auto;
display: block
}
#navlist li a, #navlist li a:link
{
background: #FFF;
color: #555;
text-decoration: none;
padding: 3px 5px 3px 5px;
display: block
}
#navlist li a#current, #navlist li a#current:link
{
color: #000;
cursor: default;
font-weight: bold;
border-bottom: 3px solid #f90;
background: #EEE
}
#navlist li a#current:hover
{
border-bottom: 3px solid #999;
background: #DDD
}
#content {
padding: 10px;
background-color: #ff8080;
}
#footer {
position: absolute; /* Needed for Safari */
padding: 10px;
background-color: #aa3939;
width: 75%;
}
#footer h1 {
padding-bottom: 0;
}
h1, p {
margin: 0;
padding-bottom: 1em;
}
h1 {
font-size: 12px;
line-height: 1.5em;
}
-->
</style>
<script type="text/javascript">
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('content').offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'absolute';
footerElement.style.top = (windowHeight - footerHeight) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//-->
</script></head><body>
<div id="content">
<div id="head">
<div id="logo">
</div>
</div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="/">home</a></li><li><a href="/mix/" id="current">mixes</a></li><li><a href="/gallery/">gallery</a></li><li><a href="/contact/">contact</a></li></ul>
</div><br/>
<div id="leftcontent">
<h1>My Mixes</h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div id="rightcontent">
right side
</div>
</div>
<div style="position: absolute; top: 810px;" id="footer">
<h1>Footer</h1>
</div>
</body>
</html>
how may i fix it? thanx! I've got a pretty basic layout: Code: <div id="wrapper"> <div id="LeftBar"></div> <div id="Header"></div> <div id="MainContentPane"> </div> <div id="Footer"></div> </div> The Footer runs the full width of the page. The Leftbar runs from the top of the page to the top of the Footer. The header runs from the right side of the Leftbar to the width of the wrapper. The MainContentPane runs from the right side of the Leftbar, bottom of the Header to the top of the Footer. The Leftbar contains a vertical graphic as a background and it does not contain any other content. I'm trying to figure out how to make the Footer sit tight to the bottom of what ever content is in the MainContentPane section and have the Leftbar not show below the Footer if the MainContentPane is vertically smaller then the background image in the Leftbar. The look of the page is pretty straight forward and common so if my explanation is confusing I apologize. TIA Hello ppl, the problem I got is the following: I have a set of pages consisting of a header a main content and a footer. I made the footer displaying at the bottom of the page even if the page is empty by the help of the following post: http://forums.devshed.com/showthrea...39&page=1&pp=15 The problem I have now is: in the css file I do not define the variable width for the header and it gets displayed like I would expect it if I said width=100%. Now if I do not define the width of the footer it is really small. If I define it like width=100% it looks ok in IE and like 102% in mozillabased browsers. Now I do not want to talk about IE vs. Mozilla issues, I just want to know why defining no width for the header works but not for the footer. here is a link to my page where footer has a width=100% : www.ovidius-journeys.de/index.html and the link to the coresponding css file is www.ovidius-journeys.de/tierraverde-screen.css here is a link to a test page where footer is lacking a width definition: www.ovidius-journeys.de/test.html and the coresponding css file is www.ovidius-journeys.de/test.css Please remember to test both url with IE and Mozilla to see the difference. I am seriously determined to fix this misbehaviour. THerefore I made a small drawing to illustrate things: www.ovidius-journeys.de/images/diagramm.jpg There is a hotlink protection active, I managed to bypass it a little but you still have to copy the url into a new browser window, meaning only referers from my domain are allowed but entering the url manually without sending a referer will work. The drawing shows how my pages are structured. I also added some atributes from the css file as far as I thought them relevant for this problem. my pages have the following structure, which you can see in action at http://www.auroratheatre.org: Code: <body>
<div id="wrapper">
<div id="header">
header
</div>
<div id="content">
<div id="col"> left nav </div>
<div id="main"> main center column </div>
<div id="photocol"> right column </div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
and the following CSS: Code:
html, body, #wrapper {
min-height: 100%;
width: 100%;
height: 100%;
}
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 80%;
color:#000;
background-color:#F8ED97;
margin: 0 auto;
}
#wrapper {
padding: 0px;
background-image:url(../images/back.gif);
background-position:center;
background-repeat:repeat-y;
position: absolute;
}
html>body, html>body #wrapper {
height: auto;
}
#header {
text-align: center;
background-color: #000;
height: 90px;
width: 100%;
}
#content {
width: 775px;
margin: 0 auto;
text-align: center;
margin-bottom: 30px;
}
#col {
width: 130px;
background-color: #900;
float: left;
}
#main {
width: 404px;
float: left;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 30px;
text-align: left;
}
#photocol {
width: 220px;
float: left;
}
#footer {
clear: both;
background-color:#000;
text-align: center;
width: 100%;
position: absolute;
bottom: -1px;
}
This works well for compliant browsers, centering the content on the screen and putting the footer at the bottom of the viewport even if the content isn't long. This is what I want. The trouble is, in IE 5.0 it doesn't center the content, just the background, and everything is thrown to hell. A little scratching around revealed that if you want to center a div in IE 5.0, you need to use text-align: center. OK, but if I DO that, and add a text-align: center to the #wrapper div, then everything is OK in IE 5.0 and Mozilla, but NOT IE 6.0 - modern IE browsers do a weird thing of putting the footer to right of all the content, making the page scroll horizontally, which is ugly as hell. If I remove the position: absolute from the #footer div than that problem goes away, but the footer sits at the bottom of the content, not the viewport, and pages with short content look bad. Anyone know of a way to have it all ways? Centered content and absolute footer and happy IE 5.0? Thanks, -D Hi - I've got an issue with the positioning on my footer - It displays at the top of the page (underneath the top content and stuff) when I want it to display at the end of my main DIV - #wrapper. here's my css: Code:
/* WRAPPER corresponds to the container that surrounds all the content (navigation, text, etc.) */
#wrapper {
position: absolute;
width: 768px;
left: 0px;
top: 0px;
background-color: #FFFFFF;
}
/*BEGIN content elements (display within the wrapper - in theory) */
.inner_header {
position: absolute;
top: 4px;
width: 565px;
}
.inner_content {
position: relative;
top: 126px;
left: 189px;
width: 515px;
}
.inner_headline {
position: absolute;
top: 94px;
left: 189px;
width: 350px;
font-family: verdana;
font-size: 11pt;
font-weight: bold;
color: #000066;
}
.inner_top_right {
position: absolute;
left: 565px;
top: 4px;
width: 203px;
}
.inner_searchbox {
position: absolute;
top: 250px;
left: 7px;
width: 166px;
}
.inner_topbar {
position: absolute;
width: 768px;
height: 4px;
background-color: #1f295c;
}
/*END content */
/* HERE's the part I want to display at the END of all other loaded content. */
#footer {
width: 768px;
margin-top: 0px;
}
Here's the HTML: Code: <div id="wrapper">
<div class="nav">
<?php include "nav.php"; ?>
</div>
<div class="landing_page">
<?php include "land.php"; ?>
</div>
<h1><?php echo $message; ?></h1>
<div class="header">
<?php include "header.php"; ?>
</div>
<div class="searchbox">
<?php include "searchbox.php"; ?>
</div>
<div class="featured_jobs">
<?php include "featjobs.php" ?>
</div>
</div> <!--close the wrapper-->
<div id="footer">
<?php include "footer.php"; ?>
</div>
Thank you in advance for considering my question. -Taylor Hi all, Basically I want to position a footer at the very bottom of my page which is 100% in width. So far I have: Code: .linkbar {
display:block;
background-color:black;
position:absolute;
height:100px;
width:100%;
bottom:0px;
left:0px;
}
.picturebox {
display:block;
background-color:blue;
position:absolute;
height:50px;
width:50px;
bottom:0px;
left:0px;
}
This is what I have so far and I geta reasonable result in IE but nothing at all in firefox, the box doesn't even appear. Any help would be greatly appreciated! Regards, Jack. I'm having trouble with my website structure... view this page for an example... css is here... The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page... It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF... how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF? Thanks Bryan Code: http://xbox-free.co.uk/ Can anyone advise as to why my footer is overlapping/floating to the right? Cheers, Neil Hi all, I'm having troubles with my footer and I hope someone will be able to help: test.katiefleming .ca (remove space) User: wendy Pass: letmein The footer is supposed to span across the bottom forever should the user increase the browser window (this works). However, my text moves as the window is expanded/contracted. I want it to be fixed. No idea how to do this. Any help would be great! Hi, Im trying to make my footer on my page be a certain height of around 150px. BUT I want it to fill to the bottom of the page even when there is less content or the window is made larger or smaller. So basically a sticky footer which fills to the bottom of the page. An example would be the footer he yoast.com My current CSS is he #fwrap { background-color:#BAAE9F; border-top: 1px solid white; border-top-width: 1px; border-top-style: solid; border-top-color: white; width:100%; height:100%; height:145px; } Any help would be appreciated! Thanks Hey All, I'm stumped on a problem I'm having with css. Here's the website I'm working on: johnraymondonline.com/mjbfoundation/ It's wordpress and I was working to modify a template. The problem I'm having is with the div for the footer. I've made the width 100% and it's not expanding the full width of the page. I've checked to see if it was encased in a div and it appears as if it isn't. I'm not sure what to do at this point...use absolute positioning? Any help would be appreciated. Thanks in advance!!! Hello. Maybe this would be a better post on CSS. Here is my code. Right now I'm trying to add a set of links at the bottom of the web page. Any thoughts? This has been driving me nuts! Thanks again everyone HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<html>
<head>
<title> Attorneys at Law, New York Lawyer</title>
<meta name="" content="">
<META NAME="Generator" CONTENT="Microsoft FrontPage 5.0">
<meta name="KeyWords" content="HTML">
<link rel="stylesheet" type="text/css" href="index.css" />
<script src="index.js">
</script>
</head>
<body>
<div id="mainContainer">
<div id="topBar"><img src="webbanner.jpg" width="760" height="100">
<!--#include file="left_bar.shtml" -->
<!-- Main Content-->
<div id="mainContent">
<!-- Google Search-->
<form action="" id="cse-search-box">
<div align="right">
<input type="hidden" name="cx" value="013298611985327428493:xedrvpp2ns4" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="(URL address blocked: See forum rules)=cse-search-box&lang=en"></script>
<!-- BreadCrumb Nav-->
<div id="navBreadCrumb">
<a href="(URL address blocked: See forum rules)">Home</a>
<img src="breadcrumb_arrow.png" width="8" height="5" />
<a href="">Areas of Practice</a>
<img src="breadcrumb_arrow.png" width="8" height="5" />
<a href=""> Real Estate</a>
<img src="breadcrumb_arrow.png" width="8" height="5" />
<strong>Foreclosure</strong>
</div>
<h1><font face="times new roman, times, serif" size="5">About Our Firm</font> <hr size="2" width="100%" />
<!-- end content --></h1>
<p align="justify"><strong>Lawyer</strong> is a full-service law firm with conveniently located offices in ... and ... Counties. As the largest suburban general practice in ..., we have a skilled team of 31 attorneys, including a physician-attorney, as well as two on-staff Registered Nurses and an extensive support staff to serve our clients.</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<h5>Why should you choose .... at your New York Attorney?</h5>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv </p>
<p align="justify">individual circumstances.</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<h5>Affiliations</h5>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<p align="justify">Please visit our <a class="con" href="practice_areas.php">
areas of practice</a> for further information on our legal services or <a class="con" href="email.php">
contact us </a>directly for an initial consultation.</p>
</div>
</div>
</div>
</body>
</html>
CSS Code:
html{
height:100%;
}
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size:0.8em;
margin:0px;
padding:0px;
background-color:#001b4f;
text-align:center;
}
.clear{
clear:both;
}
#mainContent{
padding-right:10px;
padding-left:210px;
padding-bottom:10px;
background-color:#fff;
}
#mainContainer{
width:760px;
text-align:left;
margin:0 auto;
background-color: #fff;
border-left:1px solid #272727;
border-right:1px solid #272727;
padding-bottom:10px;
}
#topBar{
width:760px;
height:100px;
padding-bottom:0px;
padding-top:0px;
border-bottom:2px solid #272727
}
#searchbox{
position:absolute:0,0;
}
#leftMenu{
width:200px;
padding-left:10px;
padding-right:1px;
float:left;
background-color: #fff;
padd
padding-top:25px;
}
#botTable{
display: table-footer-group;
float: top;
bottom: 100%
I want my footer to have no whitespace under it (like 1px ). I have it set like this: #footer { border-top:1px solid; text-align:right; margin:0px; font-size:smaller; padding-bottom:0px; } and it doesn't work so I'm guessing it is somewhere else in the file but I've tried messing around with most (all?) of the padding / margins and it still doesn't work. How could I do this? What I want is like the footer at http://www.oswd.org . |
|||||||