SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Keep Footer at the Bottom of the Screen

    Hya.

    The problem only occurs on Firefox.

    For some reason, the footer stays under the sidebar and doesn't dock at the bottom of the page, which is a problem when there is little text.

    This only happens on a new wordpress file I created, to view the blog pages (about, contact, home, etc...).

    Here's the my wordpress "page dot php" code:
    Code:
    <?php
    get_header();
    get_sidebar();
    ?>
    <div id='content'>
    	<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
    		<h2><?php the_title(); ?></h2>
    		<div id='static_content'>
    			<?php the_content(); ?>
    		</div>
    		<?php edit_post_link('Edit this page...', '<strong>', '</strong>'); ?>
    		<?php endwhile; else : ?>
    		<h2>Page not found!</h2>
    		<div><?php get_search_form(); ?></div>
    		<?php endif; ?>
    </div>
    <?php get_footer(); ?>
    The page code seems fine, I believe the problem resides in the CSS.

    Code:
    body
    {
    	color:#000;
    	font-family: Verdana, Georgia, "Times New Roman", Times, serif;
    	font-size:11px;
    	line-height:175%;
    	margin:0;
    	padding:0;
    	text-align:center;
    }
    
    #wrap
    {
    	margin:0 auto;
    	text-align:left;
    	width:860px;	
    }
    
    #content
    {
    	font-size:1em;
    	float:left;
    	padding:1em;
    	width:500px;
    }
    
    #sidebar
    {
    	font-size:1em;
    	float:right;
    	padding-top:2em;
    	width:300px;
    }
    
    #header
    {
    	padding:3em 1em;
    }
    
    #footer
    {
    	padding: 0.5em;
    	color:#000;
    	clear:both;
    	font-size:1em;
    }
    Finally, here's the "footer dot php" file

    Code:
    </div>
    <div id="footer">Copyright &copy <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All rights reserved.</div>
    <!-- Google Analytics -->
    </body>
    </html>
    I tried to remove that first </div>, but it appears to be important.

    I have spent a few hours on this and can't see the problem.

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pri]M[aL, welcome to SitePoint!

    I can't see any "sticky footer" code in your css.

    You have a FAQ thread in the CSS forum that explains how to put a footer at the bottom of the window.
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi erik.j,

    I read the thread but it doesn't seem useful. I'm using a simple 2-column layout.

    The footer behaves correctly on every other section of the website, except on the page_php file I posted before, which is weird.

    I still think the answer lies in the css file, but I can't find the solution. Despite my efforts.

    What do you mean by "sticky-footer"?

    Anyways here's my style . css,
    Code:
    /*************************************
     +Containers
     *************************************/
     body
    {
    	color:#000;
    	font-family: Verdana, Georgia, "Times New Roman", Times, serif;
    	font-size:11px;
    	line-height:175&#37;;
    	margin:0;
    	padding:0;
    	text-align:center;
    }
    
    #wrap
    {
    	margin:0 auto;
    	text-align:left;
    	width:860px;	
    }
    
    #content
    {
    	font-size:1em;
    	float:left;
    	padding:1em;
    	width:500px;
    }
    
    #sidebar
    {
    	font-size:1em;
    	float:right;
    	padding-top:2em;
    	width:300px;
    }
    
    #header
    {
    	padding:3em 1em;
    }
    
    #footer
    {
    	padding: 0.5em;
    	color:#000;
    	clear:both;
    	font-size:1em;
    }
    
    /*************************************
     +Hn and p
     *************************************/
    h1, h2, h3
    {
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight:normal;
    	line-height: 1em;
    	margin:0;
    }
    
    #header h1
    {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size:3em;
    	margin:0;
    	margin-right:1em;
    }
    
    #header h1 a{color:#E87830;}
    #header h1 a:hover{ color:#CC0000;}
    
    #header p
    {
    	color:#aaa;
    	font-size:1.1em;
    	margin:0;
    	margin-top:-0.5em;
    }
    
    #header img{border:0pt}
    
    
    .entrytitle h2{font-size:2.2em;}
    .entrytitle h2 a {color:#B4C24B;}
    .entrytitle h2 a:hover{color:#58BBEB;}
    
    .entrytitle h3
    {
    	font-size:1.8em;
    	color:#6F6F6F;
    }
    
    #sidebar h2
    {
    	font-family: Arial, Verdana, "Times New Roman", Times, serif;
    	font-size:1.3em;
    	color:#000;
    	text-transform: uppercase;
    }
    
    #sidebar h3
    {
    	color:#555;
    	font-size:1.5em;
    	margin:1em 0;
    }
    
    /*************************************
     +Entry
     *************************************/
    .entry{margin-bottom:3em;}
    
    .entrymeta
    {
    	font-size:1em;
    	border-top: 1px #ccc dashed;
    }	
    
    /*************************************
     +Sidebar
     *************************************/
    #sidebar ul
    {
    	list-style-type:none;
    	margin:0;
    	padding:0;
    }
    
    #sidebar ul li{padding:0.2em;}
    
    /*************************************
     +Comments
     *************************************/
    .commentsblock
    {
    	margin:0.5em;
    	padding:1em;
    
    }
    .commentsblock textarea{width:500px;}
    .commentsblock input, .commentsblock textarea{}
    
    .commentsblock textarea:focus
    {
    	background:#eee;
    	border:1px solid #a1a1a1;
    }
    
    .commentsblock textarea:focus, .commentsblock input:focus
    {
    	background:#eee;
    	border:1px solid #a1a1a1;
    }
    
    .commentauthor
    {
    	display:block;
    	font-size:1.5em;
    }
    
    ol.commentlist
    {
    	color:#000;
    	font-size:1em;
    	list-style-type:none;
    	margin:0;
    	margin-top:1.5em;
    	padding:0;
    }
    
    .commentlist li
    {
    	margin-bottom:0.5em;
    	padding:0.5em 1em;
    }
    .alt{}
    
    h3#comments{font-size:1.6em;}
    
    /*************************************
     +Misc
     *************************************/
    a
    {
    	color:#003366; /*%579*/
    	text-decoration:none;
    }
    a:hover{color:#CC0000;}
    
    a:visited{color:#800080;}

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pri]M[aL
    ...
    For some reason, the footer stays under the sidebar and doesn't dock at the bottom of the page, which is a problem when there is little text.
    ...
    What do you mean by "sticky-footer"?
    Sticky footer = sticky at the bottom af the viewport when there is little content to fill a larger display. I thought you meant the bottom of viewport when there is little text.

    If not, you only need to clear the footer to stay below the floats sidebar div and content div. As you already do. When there is little text the content will end above the bottom of sidebar (and probably the page will end above the bottom of viewport).

    Now I'm not sure I understand the problem?
    Happy ADD/ADHD with Asperger's

  5. #5
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Basically, Primal. All you do is use
    Code CSS:
    fixed postioning;
    and negetive margin.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  6. #6
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there and thanks for the help.

    I tried fixed positioning, but the footer sticks to the left side of the page.

    This is my problem.

    http: //img22.imageshack.us/img22/2339/56520265.jpg (don't forget to close the space after http.

  7. #7
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pri]M[aL View Post
    Hi there and thanks for the help.

    I tried fixed positioning, but the footer sticks to the left side of the page.

    This is my problem.

    http: //img22.imageshack.us/img22/2339/56520265.jpg (don't forget to close the space after http.
    have you read Pauls Tutorial? http://www.pmob.co.uk/temp/fixed-footer-only.htm
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  8. #8
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yah, I tried adding the absolute positioning and bottom: 0; but it placed the footer at the middle of the page, over the text.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't think you are understanding the suggestions made to you or perhaps we are misunderstanding what you want .

    You say you want the footer at the bottom of the viewport but as Erik already pointed out you have no code in place to achieve this (from what you've shown us).

    If you aren't doing anything active to make the footer behave as you want it will just sit under the content as shown in your image.

    The links Erik posted show how to make a "sticky-footer" which is where the footer will sit at the bottom of the viewport on small pages but sit at the bottom of the document on longer pages.

    Blake suggested a fixed footer which is where the footer always sits at the bottom of the viewport and allows the content to scroll underneath but is not usually the best approach.

    It would be better if we had a link to the page concerned so we can see the problem for ourself because the suggestions already made should address the issue. However we may be talking at cross purposes and perhaps you have some clearing issues instead.

    If you don't have a live link then send all the html from "view source" (not PHP) and attach all the css and we will take a look and try to help with what you want

  10. #10
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yah, sorry, I'm kinda new at this. The thing is I'm tweaking a wordpress theme. With a brand new install everything works great.

    Then I decided to add a page.php to build my menu sections (about, contact, subscribe, etc...).

    The php code works flawlessly. However, for some odd reason the footer doesn't behave properly, which is weird since it docks at the bottom of the page everywhere else.

    I tried the position: absolute with the negative margin but I'm probably doing something wrong because the footer sticks at the middle of the page.

    Since I can't post links yet I'll the drop the html of the afflicted page.

    HTML 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">
    
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <title>Primal   &raquo; Contact</title>
    
    <meta name="generator" content="WordPress 2.7.1" /> <!-- leave this for stats -->
    
    <link rel="stylesheet" href="http://localhost/primal/wp-content/themes/primal/style.css" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="primal RSS Feed" href="http://localhost/primal/feed" />
    <link rel="pingback" href="http://localhost/primal/xmlrpc.php" />
    
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/primal/xmlrpc.php?rsd" />
    
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/primal/wp-includes/wlwmanifest.xml" /> 
    <meta name="generator" content="WordPress 2.7.1" />
    
    </head>
    <body>
    
    <div id="wrap">
    <div id="header"><h1><a href="http://localhost/primal/"><img src="http://localhost/primal/wp-content/themes/primal/images/primal.jpg" alt="primal" /></a></h1>
    </div>
    
    
    <div id="sidebar">
    <ul>
    		<li id="text-367685811" class="widget widget_text">			<h2 class="widgettitle">Subscribe</h2>
    
    			<div class="textwidget"><a href=#">RSS Feed</a> | <a href="#">E-mail</a>
    </div>
    		</li>
    	<li id="pages" class="widget widget_pages">		<h2 class="widgettitle">Pages</h2>
    		<ul>
    			<li class="page_item page-item-2"><a href="http://localhost/primal/about" title="About">About</a></li>
    
    <li class="page_item page-item-22 current_page_item"><a href="http://localhost/primal/contact" title="Contact">Contact</a></li>
    <li class="page_item page-item-20"><a href="http://localhost/primal/recommended" title="Recommended">Recommended</a></li>
    		</ul>
    	</li>
    		<li id="recent-posts" class="widget widget_recent_entries">			<h2 class="widgettitle">Recent Posts</h2>
    			<ul>
    						<li><a href="http://localhost/primal/manufacturing-game-rules">Manufacturing Game Rules </a></li>
    
    						<li><a href="http://localhost/primal/saints-row-2-october-14">Saints Row 2 (October 14) </a></li>
    						<li><a href="http://localhost/primal/10-steps-to-become-a-better-game-developer">10 Steps to Become a Better Game Developer </a></li>
    						<li><a href="http://localhost/primal/hello-world">Hello world! </a></li>
    						</ul>
    		</li>
    <li id="categories-367685261" class="widget widget_categories"><h2 class="widgettitle">Topics</h2>
    		<ul>
    
    			<li class="cat-item cat-item-3"><a href="http://localhost/primal/category/games" title="View all posts filed under Games">Games</a>
    </li>
    	<li class="cat-item cat-item-4"><a href="http://localhost/primal/category/reviews" title="View all posts filed under Reviews">Reviews</a>
    </li>
    	<li class="cat-item cat-item-5"><a href="http://localhost/primal/category/seo" title="View all posts filed under Seo">Seo</a>
    </li>
    	<li class="cat-item cat-item-1"><a href="http://localhost/primal/category/uncategorized" title="View all posts filed under Uncategorized">Uncategorized</a>
    </li>
    		</ul>
    
    </li>
    <li id="search" class="widget widget_search"><form method="get" id="searchform" action="http://localhost/primal/" >
    	<label class="hidden" for="s">Search for:</label>
    	<div><input type="text" value="" name="s" id="s" />
    	<input type="submit" id="searchsubmit" value="Search" />
    	</div>
    	</form></li>
    </ul>
    </div><div id='content'>
    			<h1>Contact</h1>
    
    		<div id='static_content'>
    			<p>Contact form goes here.</p>
    		</div>
    				</div>
    </div>
    <div id="footer">Copyright &copy 2009 Primal.</div>
    <!-- Google Analytics -->
    </body>
    </html>
    And here's the full syle.css

    HTML Code:
    body
    {
    	color:#000;
    	font-family: Verdana, Georgia, "Times New Roman", Times, serif;
    	font-size:11px;
    	line-height:175%;
    	margin:0;
    	padding:0;
    	text-align:center;
    }
    
    #wrap
    {
    	margin:0 auto;
    	text-align:left;
    	width:860px;	
    }
    
    #content
    {
    	font-size:1em;
    	float:left;
    	padding:1em;
    	width:500px;
    }
    
    #sidebar
    {
    	font-size:1em;
    	float:right;
    	padding-top:2em;
    	width:300px;
    }
    
    #header
    {
    	padding:3em 1em;
    }
    
    #footer
    {
    	padding: 0.5em;
    	color:#000;
    	clear:both;
    	font-size: 1em;
    }
    
    /*************************************
     +Hn and p
     *************************************/
    h1, h2, h3
    {
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight:normal;
    	line-height: 1em;
    	margin:0;
    }
    
    #header h1
    {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size:3em;
    	margin:0;
    	margin-right:1em;
    }
    
    #header h1 a{color:#E87830;}
    #header h1 a:hover{ color:#CC0000;}
    
    #header p
    {
    	color:#aaa;
    	font-size:1.1em;
    	margin:0;
    	margin-top:-0.5em;
    }
    
    #header img{border:0pt}
    
    
    .entrytitle h2{font-size:2.2em;}
    .entrytitle h2 a {color:#B4C24B;}
    .entrytitle h2 a:hover{color:#58BBEB;}
    
    .entrytitle h3
    {
    	font-size:1.8em;
    	color:#6F6F6F;
    }
    
    #sidebar h2
    {
    	font-family: Arial, Verdana, "Times New Roman", Times, serif;
    	font-size:1.3em;
    	color:#000;
    	text-transform: uppercase;
    }
    
    #sidebar h3
    {
    	color:#555;
    	font-size:1.5em;
    	margin:1em 0;
    }
    
    /*************************************
     +Entry
     *************************************/
    .entry{margin-bottom:3em;}
    
    .entrymeta
    {
    	font-size:1em;
    	border-top: 1px #ccc dashed;
    }	
    
    /*************************************
     +Sidebar
     *************************************/
    #sidebar ul
    {
    	list-style-type:none;
    	margin:0;
    	padding:0;
    }
    
    #sidebar ul li{padding:0.2em;}
    
    /*************************************
     +Comments
     *************************************/
    .commentsblock
    {
    	margin:0.5em;
    	padding:1em;
    
    }
    .commentsblock textarea{width:500px;}
    .commentsblock input, .commentsblock textarea{}
    
    .commentsblock textarea:focus
    {
    	background:#eee;
    	border:1px solid #a1a1a1;
    }
    
    .commentsblock textarea:focus, .commentsblock input:focus
    {
    	background:#eee;
    	border:1px solid #a1a1a1;
    }
    
    .commentauthor
    {
    	display:block;
    	font-size:1.5em;
    }
    
    ol.commentlist
    {
    	color:#000;
    	font-size:1em;
    	list-style-type:none;
    	margin:0;
    	margin-top:1.5em;
    	padding:0;
    }
    
    .commentlist li
    {
    	margin-bottom:0.5em;
    	padding:0.5em 1em;
    }
    .alt{}
    
    h3#comments{font-size:1.6em;}
    
    /*************************************
     +Misc
     *************************************/
    a
    {
    	color:#003366; /*%579*/
    	text-decoration:none;
    }
    a:hover{color:#CC0000;}
    
    a:visited{color:#800080;}
    Thanks for the help.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As I said above there is no code in your example to make the footer behave any differently so you will need to add the following routine.

    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">
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Primal   &raquo; Contact</title>
    <meta name="generator" content="WordPress 2.7.1" />
    <!-- leave this for stats -->
    <link rel="stylesheet" href="http://localhost/primal/wp-content/themes/primal/style.css" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="primal RSS Feed" href="http://localhost/primal/feed" />
    <link rel="pingback" href="http://localhost/primal/xmlrpc.php" />
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/primal/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/primal/wp-includes/wlwmanifest.xml" />
    <meta name="generator" content="WordPress 2.7.1" />
    <style type="text/css">
    body {
        color:#000;
        font-family: Verdana, Georgia, "Times New Roman", Times, serif;
        font-size:11px;
        line-height:175&#37;;
        margin:0;
        padding:0;
        text-align:center;
    }
    #wrap {
        margin:0 auto;
        text-align:left;
        width:860px;
    }
    #content {
        font-size:1em;
        float:left;
        padding:1em;
        width:500px;
    }
    #sidebar {
        font-size:1em;
        float:right;
        padding-top:2em;
        width:300px;
    }
    #header {
        padding:3em 1em;
    }
    #footer {
        padding: 0.5em;
        color:#000;
        clear:both;
        font-size: 1em;
    }
    /*************************************
     +Hn and p
     *************************************/
    h1, h2, h3 {
        font-family: Arial, Helvetica, sans-serif;
        font-weight:normal;
        line-height: 1em;
        margin:0;
    }
    #header h1 {
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size:3em;
        margin:0;
        margin-right:1em;
    }
    #header h1 a {
        color:#E87830;
    }
    #header h1 a:hover {
        color:#CC0000;
    }
    #header p {
        color:#aaa;
        font-size:1.1em;
        margin:0;
        margin-top:-0.5em;
    }
    #header img {
        border:0pt
    }
    .entrytitle h2 {
        font-size:2.2em;
    }
    .entrytitle h2 a {
        color:#B4C24B;
    }
    .entrytitle h2 a:hover {
        color:#58BBEB;
    }
    .entrytitle h3 {
        font-size:1.8em;
        color:#6F6F6F;
    }
    #sidebar h2 {
        font-family: Arial, Verdana, "Times New Roman", Times, serif;
        font-size:1.3em;
        color:#000;
        text-transform: uppercase;
    }
    #sidebar h3 {
        color:#555;
        font-size:1.5em;
        margin:1em 0;
    }
    /*************************************
     +Entry
     *************************************/
    .entry {
        margin-bottom:3em;
    }
    .entrymeta {
        font-size:1em;
        border-top: 1px #ccc dashed;
    }
    /*************************************
     +Sidebar
     *************************************/
    #sidebar ul {
        list-style-type:none;
        margin:0;
        padding:0;
    }
    #sidebar ul li {
        padding:0.2em;
    }
    /*************************************
     +Comments
     *************************************/
    .commentsblock {
        margin:0.5em;
        padding:1em;
    }
    .commentsblock textarea {
        width:500px;
    }
    .commentsblock input, .commentsblock textarea {
    }
    .commentsblock textarea:focus {
        background:#eee;
        border:1px solid #a1a1a1;
    }
    .commentsblock textarea:focus, .commentsblock input:focus {
        background:#eee;
        border:1px solid #a1a1a1;
    }
    .commentauthor {
        display:block;
        font-size:1.5em;
    }
    ol.commentlist {
        color:#000;
        font-size:1em;
        list-style-type:none;
        margin:0;
        margin-top:1.5em;
        padding:0;
    }
    .commentlist li {
        margin-bottom:0.5em;
        padding:0.5em 1em;
    }
    .alt {
    }
    h3#comments {
        font-size:1.6em;
    }
    /*************************************
     +Misc
     *************************************/
    a {
        color:#003366; /*%579*/
        text-decoration:none;
    }
    a:hover {
        color:#CC0000;
    }
    a:visited {
        color:#800080;
    }
    /* sticky footer code*/
    html, body {
        height:100%;
        margin:0;
        padding:0
    }
    #wrap {
        min-height:100%
    }
    * html #wrap {
        height:100%
    }
    #footer {
        clear:both;
        margin-top:-35px;
        height:25px;
        padding:5px 0.5em;
        position:relative;
    }
    #content, #sidebar {
        padding-bottom:35px;
    }
    </style>
    </head>
    <body>
    <div id="wrap">
        <div id="header">
            <h1><a href="http://localhost/primal/"><img src="http://localhost/primal/wp-content/themes/primal/images/primal.jpg" alt="primal" /></a></h1>
        </div>
        <div id="sidebar">
            <ul>
                <li id="text-367685811" class="widget widget_text">
                    <h2 class="widgettitle">Subscribe</h2>
                    <div class="textwidget"><a href="#">RSS Feed</a> | <a href="#">E-mail</a> </div>
                </li>
                <li id="pages" class="widget widget_pages">
                    <h2 class="widgettitle">Pages</h2>
                    <ul>
                        <li class="page_item page-item-2"><a href="http://localhost/primal/about" title="About">About</a></li>
                        <li class="page_item page-item-22 current_page_item"><a href="http://localhost/primal/contact" title="Contact">Contact</a></li>
                        <li class="page_item page-item-20"><a href="http://localhost/primal/recommended" title="Recommended">Recommended</a></li>
                    </ul>
                </li>
                <li id="recent-posts" class="widget widget_recent_entries">
                    <h2 class="widgettitle">Recent Posts</h2>
                    <ul>
                        <li><a href="http://localhost/primal/manufacturing-game-rules">Manufacturing Game Rules </a></li>
                        <li><a href="http://localhost/primal/saints-row-2-october-14">Saints Row 2 (October 14) </a></li>
                        <li><a href="http://localhost/primal/10-steps-to-become-a-better-game-developer">10 Steps to Become a Better Game Developer </a></li>
                        <li><a href="http://localhost/primal/hello-world">Hello world! </a></li>
                    </ul>
                </li>
                <li id="categories-367685261" class="widget widget_categories">
                    <h2 class="widgettitle">Topics</h2>
                    <ul>
                        <li class="cat-item cat-item-3"><a href="http://localhost/primal/category/games" title="View all posts filed under Games">Games</a> </li>
                        <li class="cat-item cat-item-4"><a href="http://localhost/primal/category/reviews" title="View all posts filed under Reviews">Reviews</a> </li>
                        <li class="cat-item cat-item-5"><a href="http://localhost/primal/category/seo" title="View all posts filed under Seo">Seo</a> </li>
                        <li class="cat-item cat-item-1"><a href="http://localhost/primal/category/uncategorized" title="View all posts filed under Uncategorized">Uncategorized</a> </li>
                    </ul>
                </li>
                <li id="search" class="widget widget_search">
                    <form method="get" id="searchform" action="http://localhost/primal/" >
                        <label class="hidden" for="s">Search for:</label>
                        <div>
                            <input type="text" value="" name="s" id="s" />
                            <input type="submit" id="searchsubmit" value="Search" />
                        </div>
                    </form>
                </li>
            </ul>
        </div>
        <div id='content'>
            <h1>Contact</h1>
            <div id='static_content'>
                <p>Contact form goes here.</p>
            </div>
        </div>
    </div>
    <div id="footer">Copyright &copy 2009 Primal.</div>
    <!-- Google Analytics -->
    </body>
    </html>
    The techniques are explained in the faq if you are not sure how they work

  12. #12
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know, I added the code but then deleted because it messed up the page. It's kinda pointless leaving code that breaks your layout.

    I tried several times to create a sticky footer and he would stick to the left of the page or hide behind the text at the middle of the page. Not sure if it's being influenced by the other div's or I'm inputting the wrong values.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The code I pasted is a working example so just copy and paste to see it working


Bookmarks

Posting Permissions

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