Footer appearing at top, over content? - HTML Forums

Davey90994 · 11-09-2009, 05:35 PM

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">&nbsp;</p>
                <p align="left">&nbsp;</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>&nbsp;</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>&nbsp;</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

coothead · 11-10-2009, 04:52 AM

Hi there Davey,

and a warm welcome to these forums.

You seem to be having a lot of problems with your coding.

With so many images involved in your layout, we really need
to see them and/or a link to your site.

Tzfyr · 11-10-2009, 11:15 AM

Yup, seeing the site would help, but in the interim - try removing the specification for bottom and left for now. I can't see why that wouldn't at least leave it floating around at the bottom, if not necessarily properly aligned.