www.webdeveloper.com
Results 1 to 3 of 3

Thread: Center footer fixed at the bottom IE

  1. #1
    Join Date
    Apr 2010
    Posts
    3

    Question Center footer fixed at the bottom IE

    I am coding a web interface for a University project and I have been dealing with this issue:

    I want my footer fixed at the bottom so it is in place no matter which screen I am using or if I toggle the full screen mode

    It works in all the other browsers except IE7 (I do not have to support previous versions)

    HTML

    Code:
    <div id="wrapper">
           
            <div id="menu">
                <a href="information.html"  rel="shadowbox;height=500;width=650" title="INFORMATION" >
                    <img src="images/info.png" alt="information icon" />
                </a>
                <a href="images/bricks_of_destiny.jpg" rel="shadowbox[gallery]"  title="IMAGES" >
                    <img src="images/image.png" alt="image icon"  />
                </a>
                <a href="music_player.swf" title="MUSIC" rel="shadowbox;height=400;width=600" >
                    <img src="images/music.png" alt="music icon" />
                </a>
                <a href="#" title="MOVIES"><img src="images/television.png" alt="movies icon"  /></a>
                <a href="quotes.html" title="QUOTES" rel="shadowbox;height=300;width=650" >
                    <img src="images/male_user.png" alt="male user icon"  />
                </a>
                <a href="#" title="REFERENCES">
                    <img src="images/search_globe.png" alt="search globe icon"  />
                </a>
            </div>
            <a href="images/destiny_1.jpg" rel="shadowbox[gallery]" title="IMAGES"></a>
            <a href="images/destiny_carma_jewell.jpg" rel="shadowbox[gallery]" title="IMAGES"></a>
            <a href="images/destiny-joan-marie.jpg" rel="shadowbox[gallery]" title="IMAGES"></a>
            <a href="images/pursuing_destiny.jpg" rel="shadowbox[gallery]" title="IMAGES"></a>
            
            <div class="clear"></div>
            
            
            <div id="destiny">
                Discover more about the word <span class="strong">DESTINY </span>! Click one of the icon above!
                (F11  Toggle Full / Standard screen)
             </div>
            
             <div id="footer">
                <ul id="breadcrumbs">
                    <li>Disclaimer</li>
                    <li> | Icons by: <a href="http://dryicons.com/" rel="shadowbox">dryicons.com</a></li>
                    <li> | Website by: <a href="http://www.eezzyweb.com/" rel="shadowbox">eezzyweb</a></li>
                    <li> | <a href="http://jquery.com/" rel="shadowbox">jQuery</a></li>
                </ul>
            </div>
        </div>
    CSS

    Code:
    #wrapper{
    text-align:center;
    margin:0 auto;
    width:750px;
    height:430px;
    border:1px solid #fff;
    }
    #menu{
    position:relative;
    margin:0 auto;
    top:350px;
    width:450px;
    height:60px;
    }
    #destiny{
    position:relative;
    top:380px;
    color:#FFF;
    font-size:1.5em;
    font-weight:bold;
    border:1px solid #fff;
    }
    #breadcrumbs{
    list-style:none;
    }
    #breadcrumbs li{
    display:inline;
    color:#FFF;
    }
    #footer{
    position:absolute;
    width:750px;
    height:60px;
    margin:0 auto;
    text-align:center;
    border:1px solid #fff;
    bottom:0;
    }
    .clear{
        clear:both;
    }
    The white borders are there only for debugging purposes

    The application is hosted at http://www.eezzyweb.com/destiny/

    Any suggestion is appreciated

  2. #2
    Join Date
    Sep 2009
    Posts
    146
    Your (current) solution has a problem in all browsers...

    if you expand your content so that it goes beyond the height of the page the footer will overlap.

    The method i used is to keep the footer @ the bottom of you content @ all times... and then set the container to 100&#37; height so that if your content does not go all the way to the bottom your container still will. By doing it that way if your content does push beyond the browser height then the footer will just flow down like a normal div.

    Here is a live example

    The key's are as follows:
    Code:
    #contain {
        height:auto !important;<-- this is and the line under are 100% height hacks
        min-height:100%;
        text-align:left;
        width:942px;
        margin:0 auto -45px; <-- the -45 is the height of your footer 
    }
    #footer, .footerSpace {
        height:45px;
    }
    -aPeg

  3. #3
    Join Date
    Apr 2010
    Posts
    3

    Thumbs up

    Nice one. Very helpful thank you

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles