Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Footer won't push down with contents

    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 and here Header and footer 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 and here Header and footer 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

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    to make a footer stick to the bottom you use a sticky footer
    http://ryanfait.com/resources/footer...ottom-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

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Code:
    <!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"><!-- Empty Div, clears space for the real footer (f-wrap) --></div>
    		</div>
    		<div class="f-wrap">
    			<!-- Footer Script Here -->
    		</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
    Last edited by Sammy12; 07-27-2011 at 01:32 AM.

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks guys, help much appreciated


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •