PDA

View Full Version : Make a div footer? [REP]


Jahova
12-07-2008, 10:45 AM
Hey there!
I'm designing a new layout and I need to know how I can make a div;

<div align="center" id="footer">Footer</div>

Stay right at the bottom of the page, like a footer.
Let me show you what I mean..

http://uploadpicz.com/images/IRUSNR2.png

I need this to be VALID XHTML and CSS, if you can, of course.
Just post how I can do it, or a tutorial.

Thanks, Tom.

Moved by Invent (Forum Moderator) from Design & Development: Please post in the correct forum next time, thanks :).
Independent
12-07-2008, 10:50 AM
Hey there!
I'm designing a new layout and I need to know how I can make a div;

<div align="center" id="footer">Footer</div>

Stay right at the bottom of the page, like a footer.
Let me show you what I mean..

http://uploadpicz.com/images/IRUSNR2.png

I need this to be VALID XHTML and CSS, if you can, of course.
Just post how I can do it, or a tutorial.

Thanks, Tom.

CSS:

body {
font-family: "Trebuchet MS", Arial
margin: 0px;
}
#div1 {
width: 100%;
height: 150px;
}
#div2 {
width: 100%;
height: 150px;
}
#footer {
width: 100%;
height: 250px;
}HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Recieving HEAD. lmao! -->
<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="footer"></div>
</body>
</html>
Klydo
12-07-2008, 10:53 AM
I think I know what you mean, you want the footer to stay at the bottom no matter how big the page is? So if someone had 1600 x 1200 for instance and the page only covered 500px then you still want the footer to touch the bottom?
Independent
12-07-2008, 10:55 AM
I think I know what you mean, you want the footer to stay at the bottom no matter how big the page is? So if someone had 1600 x 1200 for instance and the page only covered 500px then you still want the footer to touch the bottom?
I don't think so, I think he wants it to stretch no matter what the resolution (Which my code does)
Jahova
12-07-2008, 10:56 AM
@ Klydo - YES.
@ Independant - No, that won't work.
Klydo
12-07-2008, 11:01 AM
Okay here's what you do. You set up a wrapper and footer like so;


<!-- wrapper -->
<div class="wrapper">

<!-- header -->
<div class="header">
</div>
<!-- /header -->

<!-- content -->
<div class="content">
</div>

</div>
<!-- /wrapper -->

<!-- footer -->
<div class="footer">
</div>
<!-- /footer -->This now allows us to make it look as if the footer is stretching to the bottom of the page with this CSS;


body {
background: #eeeeee;
}

/* wrapper */
.wrapper {
width: 100%;
background: #ffffff;
overflow: hidden;
}

/* footer */

.footer {
width: 100%;
overflow: hidden;
}
Independent
12-07-2008, 11:02 AM
Yes, And @ the other person.
Nope, that won't work :S.

HTML


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style>
body {
margin: 0;
}
#header {
background-color: #000478;
width: 100%;
height: 300px;
}
#content {
background-color: #000047;
width: 100%;
height: 300px;
}
#footer {
background-color: #000056;
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>

</html>
Jahova
12-07-2008, 11:07 AM
@ Klydo - I don't think you understand.
It needs to be like this;
http://uploadpicz.com/images/KM9UQGW.png (http://uploadpicz.com/images/KM9UQGW.png)

So the footer is at the very bottom of the page all the time, no matter what size of the other two divs.
Klydo
12-07-2008, 11:09 AM
@ Klydo - I don't think you understand.
It needs to be like this;
http://uploadpicz.com/images/KM9UQGW.png (http://uploadpicz.com/images/KM9UQGW.png)

So the footer is at the very bottom of the page all the time, no matter what size of the other two divs.
It's possible but not cross browser and cross screen resolution friendly. I would tell you how to do it but I've always tried to aviod it so used my solution instead.
Independent
12-07-2008, 11:14 AM
HTML (Edit)


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style>
body {
margin: 0;
}
#header {
background-color: #000478;
width: 100%;
height: 300px;
}
#content {
background-color: #000047;
width: 100%;
height: 300px;
}
#footer {
position: absolute;
bottom: 0;
background-color: #000056;
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>

</html>
Jahova
12-07-2008, 11:15 AM
What about;

<style>
html{
height: 100%;
border: 0;
padding: 0;
margin: 0;
}
body{
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
#spacer{
display: block;
height: 95%;
float: left;
width: 2px; /* 1px would be enough this is for display only */
font-size: 1px; /* to make sure width is not overridden */
padding: 0;
margin: 0;
background-color: red; /* visual effect only */
}
#contentwrap{
display: block;
width: 99%; /* to suit but leave room for spacer */
text-align: center;
padding: 0;
margin: 0;
}
#content{
margin: 0;
padding: 0;
border: 1px solid blue;
}
#footer{
clear: both;
height: 5%;
border-top: 1px solid green;
padding: 0;
margin: 0;
}
</style>


And then;

<div id="spacer"></div>
<div id="contentwrap">
<div id="content">
<p>"insert favourite foo text"</p>
</div><!-- content -->
</div><!-- contentwrap -->
<div id="footer">footer</div>
Klydo
12-07-2008, 11:17 AM
That's going to make all content forced downwards isn't it...

In your footer's CSS put;


position: absolute;
bottom: 0;However that will make it float above the content and stay in view at all times I'm sure...

http://lists.evolt.org/archive/Week-of-Mon-20020401/108597.html - Read that article, kind of explains the problem with what you're trying to do.
Independent
12-07-2008, 11:20 AM
That's going to make all content forced downwards isn't it...

In your footer's CSS put;


position: absolute;
bottom: 0;However that will make it float above the content and stay in view at all times I'm sure...
Ah, my code is wrong and I don't know a fix, sorry.
Jahova
12-07-2008, 11:23 AM
Thanks Klydo, your method worked.

Also, thanks to Independant for helping me understand some other things.
+REP to both of you.

Mod can now close this thread =]
Invent
12-07-2008, 12:01 PM
Sorry! We can't close threads upon request :( You have to purchase VIP for that feature :)
Oddsocks
13-07-2008, 04:57 AM
It's possible but not cross browser and cross screen resolution friendly. I would tell you how to do it but I've always tried to aviod it so used my solution instead.

While your method of position absolute is good, using a position absolute could have a bad effect on the rest of the code, theres a way using position relative which is quite good, or just using a sticky footer, which uses math to work it out :):





* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}








<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>




Source: http://ryanfait.com/sticky-footer/

Or there is the other option of using CSS Grids :)

Want to hide these adverts? Register an account for free!