CSS Forum

**sbronson** · 04-02-2009, 07:31 PM

I've tried to position my footer several times and I've looked at several tutorials. When I set it, it positions itself in the midder of the page. Can anyone help.

**NewBreed** · 04-02-2009, 08:23 PM

Post your website please.

**sbronson** · 04-02-2009, 08:25 PM

Its not complete so its not up yet

**LadynRed** · 04-03-2009, 11:22 AM

Then post ALL your code.

**sbronson** · 04-03-2009, 10:18 PM

h1 {
font-style: Bold;

color: #999999;
position: absolute;
top: 600px;
left: 60px;}
h2{
color: #999999;
font-style: Bold;
font-size: 32px;
position: absolute;
top: 800px;
left: 60px;
}

h3{
color:#999999;
font-style: Bold;
font-size: 32px;
position: absolute;
top: 600px;
right: 80px;
}
P{
color: #999999;
font-size: 24px;
position: absolute;
top: 650px;
right: 80px;
}

<!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>Host Eagle Web Shop</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" rel="stylesheet" href="eaglecss1.css" />
</HEAD
<BODY>

<a href="#"><img src="hosteaglelogo.gif"></a>
   <a href="home.html">Home</a>   
<a href="#">Portfolio</a>   
<a href="#">Blog</a>   
<a href="#">Contact</a>
<div id="background_image">
<span></span>
<img src="placeholder_box.gif" />
</div>
<img src="grayspacer.gif" style="float:right; margin:100px 450px 300px 0px; cursor

ointer; cursor:hand; border:0" width="1" height="500"

<h1>Title For Main Thing</h1>
<h2>Other Item Title</h2>
<h3>Home Office</h3>
<p>1150 N 850 W<br>Provo, Utah, USA<br><br>801.372.2610<br>brentleavitt@sunswingme dia.com<br><font color="#730202">Use our contact form</font></p>

</BODY>

**LadynRed** · 01:58 PM

Get rid of all the position:absolute and use the normal document flow and your footer should go where you want it - at the bottom.

Please, no spacer gifs (soooo 1997) and no horrible <font> tags !

Put your menu into an unordered list, because that IS what it is.

Which part of that code is supposed to be your footer ?

Try something like this:

Quote:

#wrapper{
position: relative;
margin: 0;
padding: 0;
overflow: auto;

}

#content{
margin: 0;
background:#ffdead;

overflow: auto;
}

#footer{
clear: both;
color: #730202;
background: #b0e0e6;
}
#footer p{
margin: 0;
padding:0;
}

ul#nav{
margin: 10px 0;

}

#nav li{
display: inline;
margin: 0 4px;
}

h1 {
font-style: bold;
color: #999999;
/*position: absolute;
top: 600px;
left: 60px;*/
}

h2{
color: #999999;
font-style: bold;
font-size: 32px;
/*position: absolute;
top: 800px;
left: 60px;*/
}

h3{
color:#999999;
font-style: bold;
font-size: 32px;
/*position: absolute;
top: 600px;
right: 80px;*/
}
p{
color: #999999;
font-size: 24px;
/*position: absolute;
top: 650px;
right: 80px;*/
}

.imgRight{
float:right;
margin:100px 450px 300px 0px;
cursor:hand;
border:0;
}

</style>
</head>

<body>
<div id="wrapper">

<ul id="nav">
<li><a href="#"><img src="hosteaglelogo.gif"></a></li>
<li><a href="home.html">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>

</ul>
<div id="content">

<img src="placeholder_box.gif" />

<img class="imgRight" src="grayspacer.gif" width="1" height="500" />

<h1>Title For Main Thing</h1>
<h2>Other Item Title</h2>
<h3>Home Office</h3>
</div>
<div id="footer">
<p>1150 N 850 W<br>Provo, Utah, USA<br><br>801.372.2610<br>brentleavitt@sunswingme dia.com<br>
<p>Use our contact form</p>
</div> 
</div>

The colors are just to illustrate the divs. But the footer will stay at the bottom.

**sbronson** · 04-04-2009, 03:26 PM

Thanks