Printable View
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..
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 :).
CSS:Quote:
Originally Posted by TomSpit
HTML:Code:body {
font-family: "Trebuchet MS", Arial
margin: 0px;
}
#div1 {
width: 100%;
height: 150px;
}
#div2 {
width: 100%;
height: 150px;
}
#footer {
width: 100%;
height: 250px;
}
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>
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)Quote:
Originally Posted by Klydo
@ Klydo - YES.
@ Independant - No, that won't work.
Okay here's what you do. You set up a wrapper and footer like so;
This now allows us to make it look as if the footer is stretching to the bottom of the page with this CSS;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 -->
Code:body {
background: #eeeeee;
}
/* wrapper */
.wrapper {
width: 100%;
background: #ffffff;
overflow: hidden;
}
/* footer */
.footer {
width: 100%;
overflow: hidden;
}
HTMLQuote:
Originally Posted by TomSpit
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>
@ 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.Quote:
Originally Posted by TomSpit
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>
What about;
And then;Code:<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>
PHP Code:<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>
That's going to make all content forced downwards isn't it...
In your footer's CSS put;
However that will make it float above the content and stay in view at all times I'm sure...Code:position: absolute;
bottom: 0;
http://lists.evolt.org/archive/Week-...01/108597.html - Read that article, kind of explains the problem with what you're trying to do.
Ah, my code is wrong and I don't know a fix, sorry.Quote:
Originally Posted by Klydo
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 =]
Sorry! We can't close threads upon request :( You have to purchase VIP for that feature :)
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 :):Quote:
Originally Posted by Klydo
Code:
- * {
- margin: 0;
- }
- html, body {
- height: 100%;
- }
- .wrapper {
- min-height: 100%;
- height: auto !important;
- height: 100%;
- margin: 0 auto -4em;
- }
- .footer, .push {
- height: 4em;
- }
Source: http://ryanfait.com/sticky-footer/Code:
- <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>
Or there is the other option of using CSS Grids :)