Topic: Using CSS to create a box that sticks to the bottom of the page... (Page 1 of 1) 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... (Page 1 of 1)" rel="nofollow" >Topic: Using CSS to create a box that sticks to the bottom of the page... <span class="small">(Page 1 of 1)</span>\

 
DaveFA
Obsessive-Compulsive (I) Inmate

From: USA
Insane since: Feb 2004

posted 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 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 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 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 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:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu