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
    May 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Footer Problems! (5 Side by Side DIV elements, at bottom of the page)

    So what I want is a footer that is *always* at the bottom of my browser window (I'm only optimizing for Internet Explorer if that makes a difference).....

    But I want it to be comprised of 5 side by side DIV elements.

    I've also got a container DIV elements where everything is inside of it.

    I've tried two methods with varying results:

    1) Make the footers have absolute positioning with bottom =0. This makes it so one DIV element is at the very bottom but the other 4 don't show up
    2) Make the footers relative positioning, this makes it so that they are side by side, but occur after the last element (in other words, not at the very bottom).
    3) I tried putting the footers inside/outside the wrapper DIV with no effect.

    Here is the code:

    #footer1, footer2, footer3, footer4, footer5{
    color: #dbdfee;
    height: 65px;
    width: 20%;
    text-align: left;
    background-color: transparent;
    background-image: url(img/bg_top.png);
    background-repeat: repeat-x;
    background-position: bottom;
    margin-top: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0%;
    position:relative;
    clear: none;
    float: left;

    }

    #footer5{
    width: 19.95%;
    float: left;
    }

    #wrapper-page{
    width: 100%;
    background: #b4c2d4 url(img/bg_grad.png) repeat-x center top;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    position: relative;
    min-height: 100%;
    }

    Ideas?

    Thanks very much in advance!

    This is also a question of style... if you're going to have different things going on in each DIV I thought you should divide it into different DIVs... I want to make sure my 5 DIV approach is actually correct.

  • #2
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    This would work, however size would vary etc, because i have the size set to 800px, but you could change this.

    Code:
    <style type="text/css">
    
    #bottom {
    	position: fixed;
    	bottom: 0px;
    	width: 810px;
    	height: 82px;
    	border: 1px dotted black;
    
    }
    
    #one, #two, #three, #four, #five{
    
    	float: left;
    	width: 160px;
    	border: 1px dotted black;
    	height: 65px;
    }
    
    
    
    </style>
    <body>
    
    <div id="bottom">
    
    <div id="one">
    <b><i>Div One</i></b>
    </div>
    
    <div id="two">
    <b><i>Div Two</i></b>
    </div>
    
    <div id="three">
    <b><i>Div Three</i></b>
    </div>
    
    <div id="four">
    <b><i>Div Four</i></b>
    </div>
    
    <div id="five">
    <b><i>Div Five</i></b>
    </div>
    It works, but there may be a better way of doing it. Kinda rushed it because im on the way to bed.

    Jon
    "You only live once, play it right, and once is enough" - me :)
    "When i die only god can take my soul" - me again! :P

  • #3
    New to the CF scene
    Join Date
    May 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    that works so damn good... thanks so much for your help! i'm a css newb, but learning quickly!

  • #4
    New to the CF scene
    Join Date
    May 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    doesnt' position: fixed, fail for IE 6?

    I'm reading here that position: fixed doesn't work for IE6... is this true?

    If so, how can I still do what I want using another method?

    Thanks very much in advance!

  • #5
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    theres a workaround for IE6, add this:

    body {height: 100%; overflow: auto; }

    Then everything you want 'fixed' use 'absolute' and it will be fixed.

    hope that helps

    jon
    "You only live once, play it right, and once is enough" - me :)
    "When i die only god can take my soul" - me again! :P


  •  

    Posting Permissions

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