Bottom overlaping

BrandonE97 · August 28, 2009

The footer or bottom part of my layout is not moving down the page as the content area grows bigger. As you can see on the page set up for testing. http://www.brandone97.com/theme/ice3. Ive done a bunch of code changes and cant find what the problem is. Please, any help is greatly appreciated.

EternalSorrow · August 29, 2009

It's a little difficult to tell without any code (other than looking at your source), but I'd say you should place the footer in a separate div and float it to the left. Do the same with the header and body content (encase in div and float to left) and that should take care of your problem.

BrandonE97 · August 29, 2009

Its actually already in its own div. Adding float left does nothing. Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<meta http-equiv="content-Style-type" content="text/css" />
<meta http-equiv="content-Script-type" content="text/javascript" />
<meta name="description" content="Home to Brandon Estep of Virginia" />
<meta name="keywords" content="Brandon Estep, BrandonE97, 97, brandone97, Estep, writings, movies, flash, RSS, rss" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="navmenu.css" />
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
<title>BrandonE97</title>
<script type="text/javascript" src="/theme/ice3/jscript.js"></script>
</head>
<body>
	<div id="toplefta">
	<div id="topleftb">
	<div id="topleftc">
	<div id="topdiv">
	<div id="toprighta">BrandonE97
	<div id="toprightb">
        </div></div></div></div></div></div>
<div>
    	<table cellpadding="0" cellspacing="0" id="nav">
		<tr><td><a id="navHome" href="/index.BE97"><span>Home</span></a></td></tr>
    		<tr><td><a id="navWritings" href="/writings/"><span>Writings</span  ></a></td></tr>
    		<tr><td><a id="navVideos" href="/media/"><span>Videos</span></a></td></tr>
    		<tr><td><a id="navGuestbook" href="/guestbook/"><span>Guestbook</span></a></td></tr>
    		<tr><td><a id="navLinks" href="/links.php"><span>Links</span></a></td></tr>
    		<tr><td><a id="navInfo" href="/info/"><span>Info</span></a></td></tr>
    		<tr><td><span class="grey18">SubNav System:</span><br />
   			<a href="/info/contact.php" class="subnav">Contact Me</a><br />
    		<a href="/blog.php" class="subnav">Blog Archive</a><br />
    		<a href="/info/ip.php" class="subnav">IP Address</a><br />
    		<a href="/rss/" class="subnav">RSS Page</a><br />
    		<a href="/writings/sta.php" class="subnav">STA Archive</a></td></tr>
        </table>
  		<table cellpadding="0" cellspacing="0" id="body">
    	<tr><td id="boxtl"></td><td class="boxt"></td><td id="boxtr"></td></tr><tr><td id="boxl"></td><td id="boxbody">
    		<span>Title of post - Monday, 24th of August 2009</span>
    		<hr class="hr" />
    		<p class="center"><img src="/images/futurama.jpg" alt="Image" /><br />The start of Content!</p>
    		<p class="left">My blog entry. Talking about my day, week, month. Whenever I update and how much I have to talk about. Talk about my family, friends, events, etc... Maybe have an image. Usualy something funny!!!<br />Next paragraph. More talking as usual. Maybe talk about playing World of Warcraft or updating the website. Yadda Yadda Yadda. Had enough of me talking? too bad, my site and its all about me hahaha.</p>
    		<p class="center">The sad end of content...</p>
    		</td><td id="boxr"></td></tr><tr><td id="boxbl"></td><td class="boxb"></td><td id="boxbr"></td></tr>
    		<tr><td></td><td id="boxfoot">
		<a href="http://www.php.net/" target="_blank">
		<img src="/images/php-powered.gif" alt="PHP Powered" width="80" height="15" /></a> 
		<a href="http://validator.w3.org/check/referer" target="_blank">
		<img src="/images/xhtml11.png" alt="XHTML 1.0" width="80" height="15" /></a> 
		<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">
		<img src="/images/css21.png" alt="CSS2" width="80" height="15" /></a> 
		<a href="http://www.brandone97.com/rss/BE97rss.xml" target="_blank">
		<img src="/images/rss.png" alt="RSS 2.0" width="80" height="15" /></a> 
		<a href="http://www.firefox.com/" target="_blank">
		<img src="/images/firefox.png" alt="Firefox" width="80" height="15" /></a><br />
	    <span class="grey18">Visitors:</span><br />
	    <span class="blue">20420</span><br />
	    <span class="grey18">Site Version:</span><br />
	    <span class="blue">3.1.0.0</span></td><td></td>
	    </tr>
    	</table>
</div>
<div id="bottomlefta">
<div id="bottomleftb">
<div id="bottomleftc">
<div id="bottomdiv">
<div id="bottomrighta">
<p id="txtlinks">
    <a href="">Home</a> - 
<a href="">Writings</a> - 
<a href="">Videos</a> - 
<a href="">Guestbook</a> - 
<a href="">Links</a> - 
<a href="">Info</a><br />
Content of this site is © Copywrite BrandonE97 2009</p>
<div id="bottomrightb">
    </div></div></div></div></div></div>
</body>
</html>


From the CSS doc
@charset "utf-8";
/* CSS Document */
body {
font-family:"Times New Roman", Times, serif;
font-size:18px;
color:#000000;
background-color:#000066;
cursor:url("/theme/ice3/images/blue.cur"), default;
overflow:auto;
}
img {
border:none;
}
a {
color:#CCCCCC;
}
.center {
text-align:center;
}
#body {
position:absolute;
vertical-align:top;
display:inline-block;
width:586px;
height:auto;
top:130px;
left:275px;
}
#nav {
position:absolute;
display:inline-block;
width:155px;
height:auto;
top:135px;
left:75px;
}
.hide {
display:none;
}
#toplefta {
position:absolute;
background-image:url("images/toplefta.png");
background-repeat:no-repeat;
height:100px;
width:48px;
top:10px;
left:10px;
}
#topleftb {
position:absolute;
background-image:url("images/topleftb.png");
background-repeat:repeat-x;
height:100px;
width:185px;
top:0px;
left:48px;
}
#topleftc {
position:relative;
background-image:url("images/topleftc.png");
background-repeat:no-repeat;
height:100px;
width:46px;
top:0px;
left:185px;
}
#topdiv {
position:relative;
background-image:url("images/topdiv.png");
background-repeat:no-repeat;
height:63px;
width:9px;
top:0px;
left:46px;
}
#toprighta {
position:relative;
background-image:url("images/toprighta.png");
background-repeat:repeat-x;
height:63px;
width:550px;
top:0px;
left:9px;
font-size:42px;
color:#CCCCCC;
text-align:center;
}
#toprightb {
position:absolute;
background-image:url("images/toprightb.png");
background-repeat:no-repeat;
height:63px;
width:58px;
top:0px;
left:550px;
}
#bottomlefta {
position:absolute;
background-image:url("images/bottomlefta.png");
background-repeat:no-repeat;
height:100px;
width:48px;
top:auto;
bottom:5px;
left:10px;
}
#bottomleftb {
position:absolute;
background-image:url("images/bottomleftb.png");
background-repeat:repeat-x;
height:100px;
width:185px;
bottom:0px;
left:48px;
}
#bottomleftc {
position:absolute;
background-image:url("images/bottomleftc.png");
background-repeat:no-repeat;
height:100px;
width:46px;
bottom:0px;
left:185px;
}
#bottomdiv {
position:absolute;
background-image:url("images/bottomdiv.png");
background-repeat:no-repeat;
height:63px;
width:9px;
top:37px;
left:46px;
}
#bottomrighta {
position:absolute;
display:block;
background-image:url("images/bottomrighta.png");
background-repeat:repeat-x;
height:63px;
width:550px;
top:0px;
left:9px;
font-size:14px;
color:#CCCCCC;
text-align:center;
font-weight:bold;
}
#bottomrightb {
position:absolute;
background-image:url("images/bottomrightb.png");
background-repeat:no-repeat;
height:63px;
width:58px;
top:0px;
left:550px;
}
#txtlinks {
padding:12px;
}
.grey18 {
color:#CCCCCC;
font-size:18px;
font-weight:bold;
text-decoration:underline;
padding-top:3px;
text-align:center;
}
.blue {
color:#0099FF;
font-size:16px;
font-weight:bold;
text-align:center;
}
.subnav, .subnav:link, .subnav:visited, .subnav:hover {
color:#CCCCCC;
font-size:16px;
text-decoration:underline;
}
.left {
text-align:left;
font-size:14px;
font-weight:normal;
text-decoration:none;
}
.a {
width:19px;
}
#boxbody {
background-image:url("images/boxbody.png");
background-repeat:repeat-y;
width:548px;
height:auto;
}
.boxt {
background-image:url("images/boxbody.png");
background-repeat:repeat-y;
width:548px;
height:14px;
}
#boxtl {
background-image:url("images/boxtl.png");
background-repeat:no-repeat;
width:19px;
height:14px;
}
#boxtr {
background-image:url("images/boxtr.png");
background-repeat:no-repeat;
width:19px;
height:14px;}
#boxl {
background-image:url("images/boxleft.png");
background-repeat:repeat-y;
width:19px;
height:auto;
}
#boxr {
background-image:url("images/boxright.png");
background-repeat:repeat-y;
width:19px;
height:auto;
}
#boxbl {
background-image:url("images/boxbl.png");
background-repeat:no-repeat;
width:19px;
height:22px;
}
.boxb {
background-image:url("images/boxb.png");
background-repeat:repeat-y;
width:548px;
height:22px;
}
#boxbr {
background-image:url("images/boxbr.png");
background-repeat:no-repeat;
width:19px;
height:22px;
}
#boxfoot {
width:548px;
text-align:center;
}
.hr {
border:0;
width:97%;
height:3px;
background-image:url("images/hr.png");
}
#sitestats {
position:absolute;
text-align:center;
top:200px;
left:55px;
}
.footicons {;
width:548px;
height:85px;
padding:10px;
text-align:center;
}

Sign In

Bottom overlaping

Recommended Posts

BrandonE97

Link to comment

Share on other sites

EternalSorrow

Link to comment

Share on other sites

BrandonE97

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information