Topic: Using CSS to create a box that sticks to the bottom of the page... $Pages that link to <a href="https://ozoneasylum.com/backlink?for=23935" title="Pages that link to Topic: Using CSS to create a box that sticks to the bottom of the page..." rel="nofollow" >Topic: Using CSS to create a box that sticks to the bottom of the page...\$

Author	Thread
DaveFA Obsessive-Compulsive (I) Inmate From: USA Insane since: Feb 2004	posted 11-05-2004 19:01 What I'm trying to do is create a structural element, a box, that sticks to the bottom of the page, no matter what. Here's what I've got so far: code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Site Title</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <style type="text/css" media="screen,projection"> body { background: #fff; color: #333; font-family: tahoma, arial, sans-serif; font-size: 0.9em; margin: 0; padding: 0; } .bodyarea { margin: 4px; } .capsule { } #cfclogo { background: url(images/cfclogo2.gif) no-repeat; height: 86px; margin-left: 10px; margin-top: 10px; position: absolute; width: 167px; } .footerarea { background: #081d50; clear: both; color: #fff; height: 42px; margin-bottom: 0; width: 100%; } .headerarea { background: #810c18 url(images/header_background2.jpg) repeat-x; border-bottom: 3px solid #fff; color: #fff; height: 78px; width: 100%; } .headernav { background: #081d50; color: #fff; height: 30px; width: 100%; } </style> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta http-equiv="Pragma" content="no-cache" /> </head> <body> <div class="capsule"> <div class="headerarea"><span id="cfclogo"></span></div> <div class="headernav"></div> <div class="bodyarea"> <p>Content Area</p> </div> <div class="footerarea">This is what I want to stick to the bottom</div> </div> </body> </html> Any help would be appreciated. Thank you.
Nathus Bipolar (III) Inmate From: Minnesota Insane since: Aug 2003	posted 11-05-2004 19:35 I use the following on my site. It only works on Firefox and I think Opera, it is not supported by IE code: #footerarea { position: fixed; bottom:0; left:0; }
DaveFA Nervous Wreck (II) Inmate From: USA Insane since: Feb 2004	posted 11-05-2004 20:15 I appreciate that, but I need something that works for IE 5.5+ and Firefox 0.9+. Thanks, however.
Nathus Bipolar (III) Inmate From: Minnesota Insane since: Aug 2003	posted 11-05-2004 20:48 Do you want it to float at the bottom of the window while you scroll through the content? or just be the bottom of the page. Using fixed will keep it floating there in Firefox, but attaches it to the bottom of the page in IE. If you want to get the "floating" effect in IE, I think you'll need to use Javascript.
poi Paranoid (IV) Inmate From: France Insane since: Jun 2002	posted 11-05-2004 20:52 In IE5.5 you could use a behavior to force the position of the DIV according to the height of the DIV, window and scrollTop.

Topic: Using CSS to create a box that sticks to the bottom of the page...\$

Author

Thread

DaveFA
Obsessive-Compulsive (I) Inmate

From: USA
Insane since: Feb 2004

posted 11-05-2004 19:01

What I'm trying to do is create a structural element, a box, that sticks to the bottom of the page, no matter what. Here's what I've got so far:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">



<html>

<head>

<title>Site Title</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<style type="text/css" media="screen,projection">

body {

background: #fff;

color: #333;

font-family: tahoma, arial, sans-serif;

font-size: 0.9em;

margin: 0;

padding: 0;

}



.bodyarea {

margin: 4px;

}



.capsule {



}



#cfclogo {

background: url(images/cfclogo2.gif) no-repeat;

height: 86px;

margin-left: 10px;

margin-top: 10px;

position: absolute;

width: 167px;

}

.footerarea {

background: #081d50;

clear: both;

color: #fff;

height: 42px;

margin-bottom: 0;

width: 100%;

}



.headerarea {

background: #810c18 url(images/header_background2.jpg) repeat-x;

border-bottom: 3px solid #fff;

color: #fff;

height: 78px;

width: 100%;

}



.headernav {

background: #081d50;

color: #fff;

height: 30px;

width: 100%;

}

</style>

<meta name="description" content="" />

<meta name="keywords" content="" />

<meta http-equiv="Pragma" content="no-cache" />

</head>



<body>



<div class="capsule">

	<div class="headerarea"><span id="cfclogo"></span></div>

	<div class="headernav"></div>

	<div class="bodyarea">

	<p>Content Area</p>

	</div>

	<div class="footerarea">This is what I want to stick to the bottom</div>

</div>



</body>

</html>

Any help would be appreciated. Thank you.

Nathus
Bipolar (III) Inmate

From: Minnesota
Insane since: Aug 2003

posted 11-05-2004 19:35

I use the following on my site. It only works on Firefox and I think Opera, it is not supported by IE

code:

#footerarea {

   position: fixed;

   bottom:0;

   left:0;

}

DaveFA
Nervous Wreck (II) Inmate

From: USA
Insane since: Feb 2004

posted 11-05-2004 20:15

I appreciate that, but I need something that works for IE 5.5+ and Firefox 0.9+. Thanks, however.

Nathus
Bipolar (III) Inmate

From: Minnesota
Insane since: Aug 2003

posted 11-05-2004 20:48

Do you want it to float at the bottom of the window while you scroll through the content? or just be the bottom of the page. Using fixed will keep it floating there in Firefox, but attaches it to the bottom of the page in IE.

If you want to get the "floating" effect in IE, I think you'll need to use Javascript.

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted 11-05-2004 20:52

In IE5.5 you could use a behavior to force the position of the DIV according to the height of the DIV, window and scrollTop.

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: Using CSS to create a box that sticks to the bottom of the page...

Insert Slimies »

Insert UBB Code »