HTML - Footer Issues - Please Help.

Hello all,

I'm hoping someone can help me with what should be a super simple thing, but I'm not sure if I've just been staring at this code too long or what. Basically all I am trying to do is center my footer on the page, but it seems glued to the left side. I've tried putting in <div align="center" within my HTML, and auto values for my margins in CSS, but neither seem to do the trick. Can anyone help me out? Related markup is below:

<div id="footer" align="center">
<div class="container">
<div class="leftFooter">
<ul class="footerNavMain top">
<li class="first"><a href=" ">Products</a></li>
<li> | </li>
<li><a href=" ">FAQ</a></li>
<li> | </li>
<li class="last"><a href=" ">Where To Find Us</a></li>
</ul>

<ul class="footerNavMain bottom">
<li class="first">Phone Number</li>
<li> | </li>
<li class="last"><a href=" ">Email Link</a></li>
</ul>

<div class="copyright">
^&copy;
2011 Copyright™, All Rights Reserved.
</div><!-- copyright close div -->

</div>
<!-- left footer close div -->
</div><!-- container close div -->
</div>




CSS

#footer {
background: url("/Assets/footer2.jpg") no-repeat scroll 0 0;
display: block;
float: left;
height: 75px;
width: 900px;
margin-left: auto;
margin-right: auto;
}


#footer .container {
height: 75px;
margin-left: auto;
margin-right: auto;
padding-right: 45px;
padding-top: 3px;
width: 900px;
}

#footer .leftFooter {
background: none repeat scroll 0 0;
color: #FFFFFF;
display: block;
float: left;
height: 100%;
margin-left: 5 px;
overflow: hidden;
position: relative;
width: 900px;
}

#footer .rightFooter {
background: none repeat scroll 0 0 #4E4E4E;
color: #FFFFFF;
display: block;
float: right;
height: 100%;
margin-left: 15 px;
position: relative;
width: 355px;
}

#footer .copyright {
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
height: 15px;
left: 0;
line-height: 13px;
position: absolute;
text-align: center;
top: 50px;
width: 900px;
z-index: 1;
font-weight: 700;
}
#footer a:link{
color: #FFFFFF;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}

#footer a:visited {
color: #FFFFFF;
text-decoration: none;
font-size: 11px;
}

#footer a:hover{
color: #000000;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}

#footer ul.footerNavMain {
display: block;
float: left;
margin-top: 5px;
width: 900px;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#footer ul.footerNavMain.top {
margin-left: 185px;
width: 900px;
}

#footer ul.footerNavMain.bottom {
margin-left: 145px;
width: 900px;
color: #000000;
}

#footer .footernavMain li {
display: block;
float: left;
padding-left: 4px;
padding-right: 4px;
}


#footernav li a:link {
color: #FFFFFF;
text-decoration: none;
font-size: 11px;
}

#footernav li a:visited {
color: #FFFFFF;
text-decoration: none;
font-size: 11px;
}

#footernav li a:active {
color: #000000;
text-decoration: underline;
font-size: 11px;
}

#header nav li.last, #footerNavMain li.last {
padding right: 0;
}

#footer .footerNavMain li.first {
background: none repeat scroll 0 0 transparent;
padding-left:0;
}

I'm trying to add some buttons at the end of every post and this is the code I was given: Code:

<a expr:href='&quot;http://www.yardbarker.com/author/new?pUrl=&quot; + data:post.url + &quot;&amp;pHead=&quot; + data:post.title' target='_blank'><img src='http://www.yardbarker.com/images/extern/bark_wide.gif' style='border: 0; padding: 0 0 0 15; vertical-align: bottom;'/></a>
<a expr:href='&quot;http://ballhype.com/post/url/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><img alt='BallHype: hype it up!' height='22' src='http://images.ballhype.com/img/hype/button_96x22.png' width='96'/></a>

I tried to paste that in after the line: " <div class='post-footer-line post-footer-line-3'/>" but it keeps showing me an error. I'm using a blogger blog by the way. Thanks for any help you can give. I forgot to mention the site is http://notqualifiedtocomment.blogspot.com/

Hello,

I've been trying to get a footer bar at the fixed bottom position. So far, it seems to work in FF, IE and I also checked in the new Google Chrome browser.

However, in IE something strange happens: when a menu in the navigation gets expanded, the footer shifts over the width of the navigation div to the right.

You can see the site and the problem at this test page. When you go over "hoofdstukken" in the menu, the footer div moves to the right - at least in my IE7.

Any ideas what could cause this - and how to solve it?

Thanks in advance.

Kind regards,
Tom

Ok I just deleted about 100 links off of this page:

http://lmiinc.com/LMIinc_Links.html

And now as you can see there is some extra space.

What do I have to do in order to make it look "normal"?

Thanks.

i have a problem in a footer that if the content of the page did not fill the all the page
the footer will not be in front of the status bar'

but it is not working well on firefox and internet explorer in the same time]
so how i can put the footer above the status bar in the pages that not contains alot of data???

to see what i mean plz open this link in internet explorer and firefox th see the difference

http://www.graphicano.com/john/index.htm
with css:
.bodydwn {
background-image: url(images/body_dwn.jpg);
padding-left: 280px;
font-size: 10px;
vertical-align: middle;

}

and

http://www.graphicano.com/john/index2.htm
with css
.bodydwn {
background-image: url(images/body_dwn.jpg);
padding-left: 280px;
font-size: 10px;
vertical-align: middle;
width: 100%;
position: absolute;
bottom: 0px;
}

Hello, So I posted a while ago that I'm having issues with the footer on a website I'm making for a friend.

Here's a jpg of how it looks now: http://i367.photobucket.com/albums/o...epum/weird.jpg

So I really really need the footer to be RIGHT UNDER the sidebar. I can find all kinds of tutorials online about making the footer "sticky" to the bottom of the page, but nothing about making it start at an exact location.

The sidebar ends at 519px and I want the footer to start at 525px. I've tried putting that into the position property, but in dreamweaver it just shows up crossed out.

Does anyone have any input? I'm getting so frustrated and angry that I can't fix this. It's driving me nuts.

Thank you for any help!!!

I'll having issue on my page, I want to insert a footer for the copyright of this page but I cannot figure out what or how could I insert a footer to my css code and html code.

Code:

body 
{ margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #FFFAFA;
}

a:link {
color: #1C1C1C;
text-decoration: none;
}     /* unvisited link */
a:visited {
color: #1C1C1C;
text-decoration: none;
}  /* visited link */
a:hover {color: #0099CC}   /* mouse over link */
a:active {color: #0099CC}   /* selected link */

 
.seperators {color: white}/* Navigation selector */
#nav {
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
}
#nav  a:link {
color: #FFFFFF;
text-decoration: none;
}     /* unvisited link */
#nav  a:visited {
color: #FFFFFF;
text-decoration: none;
}  /* visited link */
#nav a:hover {color: #0099CC}   /* mouse over link */
#nav  a:active {color: #0099CC}   /* selected link */


/* menu*/


/* left column  */
#left {
  position: absolute;
  left: 15px;
  top: 160px;
  width: 200px;
  background: #F5F5F5;
  border-bottom: 0.5pt solid RGB(0,0,0);
  border-right: 0.5pt solid #D3D3D3;
  }
#left  .searchengine {
  width: 180px; 
  margin: 10px;
  background: #DCDCDC; 
  padding-bottom: 4px;
  padding-top: 4px; 
  border-bottom: 0.5pt solid RGB(0,0,0);
  }
#left img {width: 180px; margin: 10px;}
#left .leftbox {width: 180px; margin: 10px;}
#left .leftbox .leftheaderbox {
  background: url('../images/Header.gif') #E2E2E2;
  background-repeat: no-repeat; 
  height: 30px; 
  font-size: 14px; 
  font-weight: bold; 
  border-bottom: 0.5pt solid RGB(0,0,0);
}
#left .leftbox .leftheaderbox span {
  top: 7px; 
  left: 6px; 
  position: relative; 
  color: #F0F8FF;
}
#left .leftbox .leftheaderlist {
  background: url('../images/headerlist.gif') #E2E2E2;
  background-repeat: no-repeat; 
  height: 25px; 
  font-size: 12px; 
  font-weight: bold; 
  border-bottom: 0.5pt solid RGB(0,0,0);
}
#left .leftbox .leftheaderlist span {
  top: 7px; 
  left: 7px; 
  position: relative; 
  color: #F0F8FF;
}

#left .leftbox .leftboxlist{
  border-top: 1px outset;
  font-size: 10px;
  background: #E2E2E2;
  background-repeat: no-repeat;
  background-position: 5px;
  padding-left: 18px;
  padding-top: 4px;
  height: 18px;
  border-left-style: none; 
  border-right-style: none;
  border-top-style: none;
  border-bottom: 0.5pt solid RGB(0,0,0);
}

/* middle column  */
#center {
  position: absolute;
  top: 155px;
  width: 543px;
  margin-left: 230px;
  margin-right: 230px;
  background: #F5F5F5;
  border-bottom: 0.5pt solid RGB(0,0,0);
  border-right: 0.5pt solid #C8C8C8 ;
  }
#center .middlenav{
width: 543px;
height: 20px; 
background: #A80000;
border-bottom: 1.5pt solid #D2B48C;
}
#center .middlecontent{
width: 543px;
}
#center .middlecontent .title{
position: relative; 
font-size: 12px;
font-weight: bold;
text-align: left; 
margin: 5px;
background: #D3D3D3;  
color: #708090;
border-top: 1.5pt solid #A80000;
border-bottom: 1.5pt solid #A80000;
}

#center .middlecontent .content{
position: relative; 
margin: 5px;
font-size: 10px;
text-align: justify;  
text-indent: 5px;
}


/* right column  */
#right {
  position: absolute;
  right: 15px;
  top: 160px;
  width: 200px;
  background: #F5F5F5;
  border-bottom: 0.5pt solid RGB(0,0,0);
  border-right: 0.5pt solid #D3D3D3;
  }
#right .rightbox {width: 180px; margin: 10px;}
#right .rightbox .rightheaderbox {
  background: url('../images/Header.gif') #E2E2E2;
  background-repeat: no-repeat; 
  height: 30px; 
  font-size: 14px; 
  font-weight: bold; 
  border-bottom: 0.5pt solid RGB(0,0,0);
}
#right .rightbox .rightheaderbox span {
  top: 7px; 
  left: 6px; 
  position: relative; 
  color: #F0F8FF;
}
#right .rightbox .rightheaderlist {
  background: url('../images/headerlist.gif') #E2E2E2;
  background-repeat: no-repeat; 
  height: 25px; 
  font-size: 12px; 
  font-weight: bold; 
  border-bottom: 0.5pt solid RGB(0,0,0);
}
#right .rightbox .rightheaderlist span {
  top: 7px; 
  left: 7px; 
  position: relative; 
  color: #F0F8FF;
}

#right .rightbox .rightboxlist{
  border-top: 1px outset;
  font-size: 10px;
  background: #E2E2E2;
  background-repeat: no-repeat;
  background-position: 5px;
  padding-left: 18px;
  padding-top: 4px;
  height: 18px;
  border-left-style: none; 
  border-right-style: none;
  border-top-style: none;
  border-bottom: 0.5pt solid RGB(0,0,0);
}

And here the actual output/page





I want the footer to be like as my header just a rectangular, please someOne help me with this.

Hello HTML experts. I need someone's help urgently. I am trying to obtain the header & footer html of my site. I know I'm supposed to go to VIEW SOURCE and whatnot....but then when I get there I get stuck as I do not understand this html stuff........

Please help me......

My site is dishnetworkoffers.net

I'm not sure whether this is a CSS problem or Html but I'm gonna post it here any way.

My footer moves up on my photos pages. I put the footer php file in the exact place I put it on the home page. I don't get why it moves up on my photo page though.

Here is the link
http://www.wizardsbuzz.com/photos

So I am creating a website of artwork using a side bar full of thumbnails that open a larger image in an iframe. Unfortunately, the iframe gets rid of my footer. If I comment out the iframe, it works fine, but as soon as the iframe is back, the footer is gone again. The side bar <aside> and the iframe <section> are both floated left and right, respectfully. The footer has the clear:both property in the css sheet, so it should continue to show up, but doesn't. I've tried different heights of the footer to see if it's behind the rest of the page, and it isn't. Another thing I've noticed (not important) is that it makes the background color of the <section> transparent. That doesn't matter since the <section> only holds the iframe anyway. Any help would be appreciated.

Hi all =)

I have a page at:
http://bartending.com/online_courses...newsletter.php

The footer won't go to the bottom of the page. Can somebody please tell me what's wrong with this page?

Thank you =)

Light and Love and Healing to you,
-Patrick Arden McNally

So we got 3 columns with a header. I tried to put a footer underneath it all, but until now... no result. Anyone who can help me out?

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>driekleur pagina</title>

<style type="text/css">
html,body {
    margin:0;
    padding:0;
    height:100%;
 }


#header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:15%;
  background-color:#222222;
}

#linkerkolom {
    width:15%;
    height:100%;
    float:left;
    background-color:#776644;
 }
#middelste_kolom {
    width:70%;
    height:100%;
    float:left;
    background-color:#fff;
 }
#rechterkolom {
    width:15%;
    height:100%;
    float:left;
    background-color:#776644;
 }

#footer  {
  background-color:#f9ffff;
  position:absolute;
  border:solid 1px #CCCCCC;
  border-bottom:0px;
  border-left:0px;
  border-right:0px;
  bottom:0;
  left:0;
  width:100%;
  height:22px;
 }



</style>

</head>
<body>

<div id="header"></div>
<div id="linkerkolom"></div>
<div id="middelste_kolom"></div>
<div id="rechterkolom"></div>
<div id="footer"></div>

</body>
</html>

Hi Guys

I would like to get the footer background on this site to stretch accross the full width of the browser, but as I have already applied a background image to the body then I'm not sure how to achieve this effect. At the moment I have a background image applied to the footer but I may take this out and just have a simple white strip which covers the full width.

The site: http://horizonwebsites.co.uk/soccerwaveuk/

The CSS: http://horizonwebsites.co.uk/soccerwaveuk/screen.css

This is an effect I've wanted to use for a while now on several projects so if any one has done this or knows of sites that use it I'd be really keen to learn how.

Thanks,
Kev

I'm making a webpage that has a photo gallery on it. I found a very nice photo gallery to use at cssplay.co.uk. The gallery uses a Div in order to work. I nested the div inside of a table so that I could create the look that I wanted to. However, the footer of my webpage won't show up, no matter what I try to do. Does anyone have any suggestion? Thanks

P.S. Sorry I had to take out some of the code so that it would post.

here is the code:
HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Galleries</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="content-type" content="en" />
	<title>Galleries Home</title>
	<link href="../../CSS/Table_Header_Style_Sheet.css" rel="stylesheet" type="text/css" />
<link href="../../CSS/Marquee Style Sheet.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="../../JS/ie5.js"></script>
	<script type="text/javascript" src="../../JS/DropMenu1.js">		  </script>
    
    <!--THE CODE FOR THE PHOTO GALLERY BELOW IS THANKS TO STU NICHOLLS AT [url]http://www.cssplay.co.uk/[/url] -->
<style type="text/css">
body {text-align:center; font-family: tahoma; arial, sans-serif; font-size:76%; letter-spacing:0.05em;}

	table.dm1 { background: url( "http://i1131.photobucket.com/albums/m541/Mitch_Guzman/JetDragsterLogoWatermark2-1-1.png?t=1306259715") no-repeat; background-position:center }
	

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at [url]http://www.cssplay.co.uk/menu/lightbox.html[/url]
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* common styling */

a {color:#000;}
a:hover {text-decoration:none;}

/* slides styling */

.photo {width:635px; text-align:left; position:relative; margin:0 auto;}

.photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;}

.photo ul.topic li {display:block; width:125px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:124px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}

.photo ul.topic li a ul, 
.photo ul.topic li ul 
{display:none;}

.photo ul.topic li.active a
{color:#000; background:#bbb;}

.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}

.photo ul.topic li.active ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #bbb; z-index:1;}

.photo ul.topic li a:hover ul, 
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #aaa; z-index:100;}

.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}

.photo ul.topic li ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}

.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}

.photo ul.topic li a:hover ul li a:hover, 
.photo ul.topic li:hover ul li a:hover 
{white-space:normal; position:relative;}

.photo ul.topic li a:hover ul li a:hover img, 
.photo ul.topic li:hover ul li a:hover img 
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}

.table {
	height: 100%;
	width: 1000px;
}

table.background { background: url("http://i1131.photobucket.com/albums/m541/Mitch_Guzman/JetDragsterLogoWatermark2-1-1.png?t=1306259715") no-repeat; background-position:center }

	body,html {    
                margin:0;    
                padding:0;   
                height:100%;
            }
			
	table.background { background: url("http://i1131.photobucket.com/albums/m541/Mitch_Guzman/JetDragsterLogoWatermark2-1-1.png?t=1306259715") no-repeat; background-position:center }
	
a:link {
	color: #94D4FF;
	text-decoration:none;
}

a:hover{
color:#FF0;
}

a.header:link {
	background:none;
	color: #00C;
}
a.header:hover {color:#FF0; background:none; }
<!--This allows the color of the links to change when you hover over them a:visited {
	color: #94D4FF;
}
-->
	</style>
</head>

<body background="../../Images/CarbonFiber.jpg" link="#94D4FF" vlink="#94D4FF" alink="#94D4FF">

<div id="header" align="center">
		
		<img src="../../Images/jdp.pr.erau.edu_Header.jpg" width="1000" height="95" />
	<table background="../../Images/Table header Background.jpg" align="center" border="none" height="50" width="1000" cellpadding="0" cellspacing="0">

	<tr align="center">

		<th>
			<a href="../Home/Home Page.htm" class="header">Home Page</a>
	   </th>

        <th> 
			<a href="../Research/Research home.htm" class="header">Research</a> 
		</th>
		
		<th> 
			<a href="Galleries Home.htm" class="header">Galleries</a> 
	  </th>

        <th> 
			<a href="../JDP Calendar/JDP_Calendar.htm" class="header">Calendar</a> 
		</th>

        <th> 
			<a href="../Contact Us/Contact Us.htm" class="header">Contact Us</a> 
		</th>

    </tr>

	
</table>
		
</div>

<table class="background" border="0" bordercolor="#0000FF" align="center" style="width: 79.25%;" cellspacing="10" height="750">

	<tr>
    	<td align="center" valign="top">
	<div class="photo">
<ul class="topic">
	<li><a class="set" href="#Portraits">Portraits<!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="lbox/portrait1.jpg"><img src="http://www.cssplay.co.uk/menu/lbox/portrait1a.jpg" alt="" title="" /></a></li>
			

		<ul>
			<li><a href="#bird1"><img src="http://www.cssplay.co.uk/menu/lbox/bird1.jpg" alt="" title="" /></a></li>
			<li><a href="#bird2"><img src="lbox/bird2.jpg" alt="" title="" /></a></li>
			<li><a href="#bird3"><img src="lbox/bird3.jpg" alt="" title="" /></a></li>
			<li><a href="#bird4"><img src="lbox/bird4.jpg" alt="" title="" /></a></li>
			<li><a href="#bird5"><img src="lbox/bird5.jpg" alt="" title="" /></a></li>
			<li><a href="#bird6"><img src="lbox/bird6.jpg" alt="" title="" /></a></li>
			<li><a href="#bird7"><img src="lbox/bird7.jpg" alt="" title="" /></a></li>
			<li><a href="#bird8"><img src="lbox/bird8.jpg" alt="" title="" /></a></li>
			<li><a href="#bird9"><img src="lbox/bird9.jpg" alt="" title="" /></a></li>
			<li><a href="#bird10"><img src="lbox/bird10.jpg" alt="" title="" /></a></li>
			<li><a href="#bird11"><img src="lbox/bird11.jpg" alt="" title="" /></a></li>
			<li><a href="#bird12"><img src="lbox/bird12.jpg" alt="" title="" /></a></li>
			<li><a href="#bird13"><img src="lbox/bird13.jpg" alt="" title="" /></a></li>
			<li><a href="#bird14"><img src="lbox/bird14.jpg" alt="" title="" /></a></li>
			<li><a href="#bird15"><img src="lbox/bird15.jpg" alt="" title="" /></a></li>
			<li><a href="#bird16"><img src="lbox/bird16.jpg" alt="" title="" /></a></li>
		</ul>

	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
</ul>
<br class="clear" />
</div>
[color="Red"]This is the part I'm not sure about.[/color]
		</td>
	</tr>
    <tr style="background-color:transparent; vertical-align:text-top" align="center" >
        	<td colspan="3" style="font-size:12px" valign="top">
            	<a href="../../Home/Home Page.htm">Home</a> | 
                <a href="../../Research/Research home.htm">Research</a> | 
                <a href="../../Galleries/Galleries Home.htm">Galleries</a> | 
                <a href="../../Calendar/Calendar.htm">Calendar</a> | 
                <a href="../../Contact Us/Contact Us.htm">Contact Us</a>
                <br />
              <p>Copyright &copy; 2011 Embry Riddle Jet Dragster Project <br />
                Embry-Riddle, Prescott, AZ. All Rights Reserved <br />
              Designed by: <a href="mailto:mguzman9294@gmail.com">Mitch Guzman</a> </p>
            </td>
    </tr>


<div id="ads"></div>
</table>
	
	
</body>
</html>