div clings to bottom of browser

BrandonE97 · December 14, 2009

Ive tried everything I know to do and cant figure it out. The footer of the page stays attached to the bottom of the browser window no matter what browser I use which is probably a good thing cause it means Im just doing something simple wrong and cant figure it out. Please help and Thank you.

@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;
}
#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;
}
#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:absolute;
background-image:url("images/topleftc.png");
background-repeat:no-repeat;
height:100px;
width:46px;
top:0px;
left:185px;
}
#topdiv {
position:absolute;
background-image:url("images/topdiv.png");
background-repeat:no-repeat;
height:63px;
width:9px;
top:0px;
left:46px;
}
#toprighta {
position:absolute;
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;
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;
}


<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="advert">
    Averts here
    </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>

BrandonE97 · December 14, 2009

Here is the test page

http://www.brandone97.com/theme/ice3/

Here is a screenshot of what I get.

http://www.brandone97.com/theme/ice3/screencap.jpg

haku · December 15, 2009

Remove the absolute positioning from all those bottom divs.

BrandonE97 · December 15, 2009

Should they be changed to something else? Removing them didnt fix the problem. Just moved all the images to the top of the screen. Changing them all to relative didnt work either.

haku · December 16, 2009

Well yes, they need to be changed. And removing them did fix your problem, it just introduced a new one.

You should probably read up on positioning with floats. It's more than I can explain in one thread.

Unless you want a footer that sticks to the bottom of the screen if there isn't enough content to fill the screen, adn doesn't stick to the bottom of the screen when there is more content than can fill the screen. In that case, this link will help:

http://www.cssstickyfooter.com/

BrandonE97 · December 19, 2009

Ive been trying to get the footer to always be at the bottom of the content. Can anyone give me some help in getting my code fixed to do that. Thanks for all the help so far and hopefully I can learn how to get this fixed.

BrandonE97 · January 7, 2010

Any help... please. Would be appreciated.

haku · January 8, 2010

Did you look at that link I posted? It tells you how to do it right there.

Or if you don't even need the sticky footer and just want the footer to be below all your other code, put it after all the other code and remove any relative and absolute positioning from it.

BrandonE97 · January 8, 2010

I do need it below all the content. I love the link you posted though. The sticky footer is nice and I may use it someday when needed. When I removed all relative and absolute positioning the footers images moved to the top of the screen. Do you have an example I could go by? Thanks.

haku · January 8, 2010

You're problem is that you are laying out your whole site with absolute positioning. Problems like this come about when you do that. Spend some time reading up about floats and do some tutorials on laying out sites. Absolute positioning is fools good - it looks like it should work in theory, but in practice it almost never does.

BrandonE97 · January 9, 2010

K, I'll read up some more and keep working on it. Thanks for your help.

Sign In

div clings to bottom of browser

Recommended Posts

BrandonE97

Link to comment

Share on other sites

BrandonE97

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

BrandonE97

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

BrandonE97

Link to comment

Share on other sites

BrandonE97

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

BrandonE97

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

BrandonE97

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information