Footer won't push down with contents

quigs1969

07-27-2011, 12:23 AM

Hi Folks,

I have been designing the layout for a local history site and I thought I would try using div tags and pure css to create the site instead of the usual tables.

I tried to design it with different screen resolutions in mind and used includes to bring in the header and footer in to join the body of the page, this seemed to be going ok, I had everything in the right place and the resolution was changing when I maximised and minimised it.

If I insert an image into the contents that fits in between my header and footer as long as it is below 800x600 everything is ok (my monitor is 1280x1024) 800px high is what is left when I take the header and footer off, you can see this at http://www.acumfaegovan.com

CSS can be found here Common CSS (http://www.acumfaegovan.com/style/common.css) and here Header and footer CSS (http://www.acumfaegovan.com/style/headfoot.css)

However when I add an image and content that is greater than 800px high it goes behind my footer and I could not see it I added overflow:scroll and it lets me scroll down to the content but the footer does not push down with the contents and seems fixed to my screen resolution.

Is there a way I keep the footer pushing down as I scroll down the contents? how can I do this without losing fluidity?

You can see the problem the of content and footer here http://www.acumfaegovan.com/govan.php

CSS can be found here Common CSS (http://www.acumfaegovan.com/style/common_new.css) and here Header and footer CSS (http://www.acumfaegovan.com/style/headfoot_new.css)

Please help, I have put a lot of hours into this and I do not want to give up and go back to tables.

Colin

Sammy12

07-27-2011, 12:24 AM

to make a footer stick to the bottom you use a sticky footer
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

right now your using position: absolute; bottom: 0;, this will stick it to the bottom of the page, but removes it from the flow of the page. Sticky footer is the solution to all of your problems

quigs1969

07-27-2011, 01:17 AM

Thanks for the speedy reply Sammy

I tried the Sticky Footer, although I do not know if I have it right though, As I understand the .bodydiv class in my page is equal to the .wrapper class and the .footerdiv class equal to the .footer class.

I think I could have got it wrong as it seems to have made things worse now pushing everything at the top out and the footer has still not pushing down.

Am I missing something Sammy. here is the new page with the sticky code added. Updated Page (http://www.acumfaegovan.com/govan1.php)

Sammy12

07-27-2011, 01:24 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<style type="text/css">
body.page {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px; /* base font size */
}

* { margin: 0; padding: 0; }

html, body {
height: 100%;
}

.p-wrap {
min-height: 100%;
margin: 0 auto -50px; /* 50px = height of footer */
height: auto !important; /* ie6 fix */
height: 100%;
}

.f-ctr,
.f-wrap {
height: 50px;
clear: both; /* clears floating that may be in the content */
}

.f-wrap {
background-color: #ddd;
}
</style>
</head>
<body class="page">
<div class="p-wrap">
<div id="header"></div>
<div class="content"></div>
<div class="f-ctr"></div>
</div>
<div class="f-wrap">

</div>
</body>
</html>

your basically setting the p-wrap to 100% height minus the footer height. then your setting the "f-ctr" as a "push" to clear space for the f-wrap.

plug this into a new text document and play around with it a little bit until your comfortable in using it on your page

quigs1969

07-27-2011, 11:59 PM

Thanks guys, help much appreciated