Jump to content

Bottom overlaping

BrandonE97

By BrandonE97
in CSS Help

Recommended Posts

BrandonE97 Member

BrandonE97

Posted
Posted

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.

Link to comment
https://forums.phpfreaks.com/topic/172331-bottom-overlaping/
Share on other sites
EternalSorrow Member

EternalSorrow

Posted
Posted

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.

Link to comment
https://forums.phpfreaks.com/topic/172331-bottom-overlaping/#findComment-908801
Share on other sites
BrandonE97 Member

BrandonE97

Posted
  • Author
Posted

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;
}

Link to comment
https://forums.phpfreaks.com/topic/172331-bottom-overlaping/#findComment-908973
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.