Make a div footer? [REP]

Jahova · 12-07-2008, 11:15 AM

What about;

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>

And then;

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>

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;

Code:

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-...01/108597.html - Read that article, kind of explains the problem with what you're trying to do.

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

Originally Posted by Klydo

That's going to make all content forced downwards isn't it...

In your footer's CSS put;

Code:

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

Originally Posted by Klydo

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

:

Code:

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

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>

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

Or there is the other option of using CSS Grids

Thread: Make a div footer? [REP]

Thread Tools

Posting Permissions