Hi Everyone,
I'm designing a small personal website, my first one not using tables
- Anyways, I'm having a small problem with displaying a footer.
Basically, I want the footer to stretch right across the bottom of the page underneath everything else. The problem i'm facing is that whenever I place my footer outside of the container div, it appears at the top of my page, underneath my header, over the top of the content.
I've attached my CSS and HTML -- Any ideas would be greatly appreciated! I'll get my head around this some time
CSS has been shortened to fit on post.
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>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Table_01">
<div id="header-01_">
<img id="header_01" src="images/header_01.gif" width="800" height="9" alt="" /> </div>
<div id="header-02_"></div>
<div id="header-03_">
<img src="images/header_03.gif" alt="" name="header_03" width="26" height="7" border="0" id="header_03" /> </div>
<div id="header-04_">
<img id="header_04" src="images/header_04.gif" width="12" height="79" alt="" /> </div>
<div id="header-05_">
<img src="images/header_05.gif" alt="" name="header_05" width="43" height="7" border="0" id="header_05" /> </div>
<div id="header-06_">
<img id="header_06" src="images/header_06.gif" width="14" height="79" alt="" /> </div>
<div id="header-07_">
<img src="images/header_07.gif" alt="" name="header_07" width="26" height="7" border="0" id="header_07" /> </div>
<div id="header-08_">
<img id="header_08" src="images/header_08.gif" width="14" height="79" alt="" /> </div>
<div id="header-09_">
<img src="images/header_09.gif" alt="" name="header_09" width="56" height="9" border="0" id="header_09" /> </div>
<div id="header-10_">
<img id="header_10" src="images/header_10.gif" width="14" height="79" alt="" /> </div>
<div id="header-11_">
<img src="images/header_11.gif" alt="" name="header_11" width="51" height="7" border="0" id="header_11" /></div>
<div id="header-12_">
<img id="header_12" src="images/header_12.gif" width="5" height="79" alt="" /> </div>
<div id="header-13_">
<img id="header_13" src="images/header_13.gif" width="26" height="72" alt="" /> </div>
<div id="header-14_">
<img id="header_14" src="images/header_14.gif" width="43" height="72" alt="" /> </div>
<div id="header-15_">
<img id="header_15" src="images/header_15.gif" width="26" height="72" alt="" /> </div>
<div id="header-16_">
<img id="header_16" src="images/header_16.gif" width="51" height="72" alt="" /> </div>
<div id="header-17_">
<img id="header_17" src="images/header_17.gif" width="56" height="70" alt="" /> </div>
<div id="header-18_"></div>
<div id="header-19_"></div>
<div id="header-20_"></div>
<div id="header-21_"></div>
<div id="header-22_"></div>
<div id="header-23_"></div>
<div id="header-24_"></div>
<div id="header-25_"></div>
<div id="header-26_">
<div id="contentarea">
<div id="topspacer">
</div>
<div align="center"><img src="images/home-banner.jpg" alt="Image: Homepage" width="790" height="198" />
<div class="spacer5"></div>
<img src="images/mytab.png" width="196" height="80" /><img src="images/mytab2.png" width="196" height="80" /><img src="images/mytab3.png" width="196" height="80" /><img src="images/mytab4.png" width="196" height="80" /><br />
</div><div class="spacer10"></div>
<div id="left550">
<div class="blheader">
<h1>Welcome to My Website!</h1>
</div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula venenatis nibh, malesuada ultricies leo elementum nec. Proin pellentesque pretium arcu, a ultrices ipsum aliquam at. Donec pellentesque urna eget neque vulputate porta. </p>
</div>
<div id="right230"><div class="pkheader">
<h2>My Photos</h2>
</div>
<div align="center"><div class="spacer5"></div>
<p><img src="images/beach.jpg" alt="The Beach" /><br />
<strong>The Beach</strong></p>
<p align="left">This is a picture of a beach that I took last year!</p>
<p align="left"> </p>
<p align="left"> </p>
</div>
</div><div class="clearing"></div><div class="spacer5"></div>
<div class="bluesep"></div>
<img src="images/me-and-family.jpg" alt="" width="790" height="300" border="0" />
<div class="spacer5"></div>
<div class="left50">
<h1>A Bit About Me</h1>
<p> </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula venenatis nibh, malesuada ultricies leo elementum nec. Proin pellentesque pretium arcu, a ultrices ipsum aliquam at. Donec pellentesque urna eget neque vulputate porta. Nullam non ornare orci. Sed iaculis leo et elit lacinia porta ultrices dolor sollicitudin. </p>
</div>
<div class="right50">
<h1>A Bit About My Wife</h1>
<p> </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula venenatis nibh, malesuada ultricies leo elementum nec. Proin pellentesque pretium arcu, a ultrices ipsum aliquam at. Donec pellentesque urna eget neque vulputate porta. Nullam non ornare orci. Sed iaculis leo et elit lacinia porta ultrices dolor sollicitudin. </p>
</div>
<div class="clearing"></div>
<div class="spacer5"></div>
<div class="bluesep"></div>
<div class="spacer5"></div>
<div class="fullacross"></div>
</div><!-- End div -->
</div>
</div>
<div class="clearing"></div>
<div id="footer">This is my footer.</div>
</body>
</html>
HTML Code:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/topbg.gif);
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
}
#Table_01 {
position:relative;
left:0px;
top:0px;
width:800px;
height:128px;
margin-left:auto;
margin-right:auto;
min-height:100%;
}
#header-01_ {
position:absolute;
left:0px;
top:0px;
width:800px;
height:9px;
}
#header-02_ {
position:absolute;
left:0px;
top:9px;
width:539px;
height:79px;
background-image:url(images/header_02.gif);
}
#header-03_ {
position:absolute;
left:539px;
top:9px;
width:26px;
height:7px;
}
#header-04_ {
position:absolute;
left:565px;
top:9px;
width:12px;
height:79px;
}
#header-05_ {
position:absolute;
left:577px;
top:9px;
width:43px;
height:7px;
}
#header-06_ {
position:absolute;
left:620px;
top:9px;
width:14px;
height:79px;
}
#header-07_ {
position:absolute;
left:634px;
top:9px;
width:26px;
height:7px;
}
#header-08_ {
position:absolute;
left:660px;
top:9px;
width:14px;
height:79px;
}
#header-09_ {
position:absolute;
left:674px;
top:9px;
width:56px;
height:9px;
}
#header-10_ {
position:absolute;
left:730px;
top:9px;
width:14px;
height:79px;
}
#header-11_ {
position:absolute;
left:744px;
top:9px;
width:51px;
height:7px;
}
#header-12_ {
position:absolute;
left:795px;
top:9px;
width:5px;
height:79px;
}
#header-13_ {
position:absolute;
left:539px;
top:16px;
width:26px;
height:72px;
}
#header-14_ {
position:absolute;
left:577px;
top:16px;
width:43px;
height:72px;
}
#header-15_ {
position:absolute;
left:634px;
top:16px;
width:26px;
height:72px;
}
#header-16_ {
position:absolute;
left:744px;
top:16px;
width:51px;
height:72px;
}
#header-17_ {
position:absolute;
left:674px;
top:18px;
width:56px;
height:70px;
}
#header-18_ {
position:absolute;
left:0px;
top:88px;
width:100px;
height:33px;
}
#header-19_ {
position:absolute;
left:100px;
top:88px;
width:100px;
height:33px;
}
#header-20_ {
position:absolute;
left:200px;
top:88px;
width:100px;
height:33px;
}
#header-21_ {
position:absolute;
left:300px;
top:88px;
width:100px;
height:33px;
}
#header-22_ {
position:absolute;
left:400px;
top:88px;
width:100px;
height:33px;
}
#header-23_ {
position:absolute;
left:500px;
top:88px;
width:100px;
height:33px;
}
#header-24_ {
position:absolute;
left:600px;
top:88px;
width:100px;
height:33px;
}
#header-25_ {
position:absolute;
left:700px;
top:88px;
width:100px;
height:33px;
}
#header-26_ {
position:absolute;
left:0px;
top:121px;
width:800px;
height:7px;
}
#contentarea{
width:790px;
margin-left:auto;
margin-right:auto;
background-color:#FFFFFF;
margin-top:0;
padding-left:5px;
padding-right:5px;
}
#contentarea p,h1,h2,h3,h4,h5{
margin-top:0;
margin-bottom:0;
}
.clearing{
clear:both;
}
#footer{
margin-top:10px;
margin-bottom:5px;
background-image:url(images/footerimg-btm.gif);
width:100%;
height:24px;
padding-top:8px;
padding-left:5px;
color:#FFFFFF;
position:relative;
bottom:0;
left:0;
}
Thanks in advance!
Davey
That has to be one of the WORST cases of div-itis I've ever seen!
