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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Footer alignment

    Hi guys I've been searching and trying various ways (including sticky footer) but so far I've been unable to get the footer to stay at the bottom of the wrapper centered properly. It would neither be centered ok on small page but when it came to a big page with lots of info it would not stay aligned in the center on the bottom of wrapper properly.

    Any ideas?

    Thanks.

    Code:
    body {
      font: normal 16px/18px helvetica,arial,sans-serif;
      color: #555;
      margin: 0;
      padding: 0;
      background: url(images/bg.jpg) repeat;
      height: 100%
    }
    
    div#wrapper {
      width: 1000px;
      margin: 0 auto;
      background: #fff;
      overflow: hidden;
      height: auto;
      min-height: 100%;
      
    }
    div#footer {
    		background:#099;
    		text-align: center;
    		width:1000px;
    		height:40px;
    		float: center;
    		bottom: 0;
    		margin:0px;
    		padding:0px;
      
      }
    
    
    
    html structure
    <!doctype html>
    <head>
    
    <link href="ie.css" media="screen" rel="stylesheet" type="text/css">
    
    <link href="default.css" media="screen" rel="stylesheet" type="text/css">
    
    <link href="style.css" rel="stylesheet" type="text/css" media="screen" charset="utf-8">
    
    </head>
    
    <header>
    <span id="siteName"><a href="./"><span></span></a></span>
    <span id="siteTagline"></span>
    <center><img src="" alt="" height="80" width="500"><center>
    </header>
    <!-- / header -->
    
    <!-- begin nav -->
    <div id="nav">
    <div class="art-bar art-nav">
    <div id="navigation" class="menu-menu-container">
    Nav ul listing etc
    </div>
    <!-- end nav -->
    
    <!-- Content -->
    <section id="pageContent">
    <article>
    </article>
    </section>
    
    <!-- footer -->
    <div id="footer">
    
    </div>
    
    </div>

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    341
    Thanks
    3
    Thanked 36 Times in 36 Posts
    It's impossible to say without HTML, but I'm already seeing three mistakes: float:center, bottom:0 without position:absolute and min-height:100% while the parent element does not have the same declaration. Better have a look at the second and third tutorials I wrote for the intermediate students, on my signature page.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.


  •  

    Posting Permissions

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