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;

PHP Code:


<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..

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

Originally Posted by TomSpit

Hey there!
I'm designing a new layout and I need to know how I can make a div;

PHP Code:


<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..

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:

Code:

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

HTML:

Code:

    <!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

Originally Posted by Klydo

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;

HTML Code:

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

Code:

body {
background: #eeeeee;
}

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

/* footer */

.footer {
width: 100%;
overflow: hidden;
}

~~Independent~~ · 12-07-2008, 11:02 AM

Originally Posted by TomSpit

Yes, And @ the other person.
Nope, that won't work :S.

HTML

HTML Code:

<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

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

Originally Posted by TomSpit

@ Klydo - I don't think you understand.
It needs to be like this;
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 Code:

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

Thread: Make a div footer? [REP]

Thread Tools

Make a div footer? [REP]

Posting Permissions