SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2005
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Keeping a div stuck to the bottom

    I have this site here which uses the background stretcher jquery effect for the background image.

    My problem is trying to keep the 3 boxes stuck towards the bottom in certain screen resolutions. In a 1440x900 res with panoramic monitor, the boxes are at the bottom. But in another which isn't panaroamic, the boxes flow too high up to the top.

    Suggestions for techniques I can implement?

    I've tried Ryan Fait's sticky footer but that won't work because no div can be outside of the wrapper div. in order for it to work. I have the bodystrip div outside of the wrapper div.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Sticky footers aren't really natural CSS behavior, so are a little hard to do. Here's Paul O'Brien's bulletproof method:

    http://www.sitepoint.com/forums/1239966-post3.html

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2005
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm...I'm getting stuck on something. I applied method #1. My wrapper div has a negative margin bottom of 200px which is the height of the box-wrapper div (the footer).

    However, the div is flowing up to the top.

    Please note that I didn't apply the hacks for IE6 or opera at this point and just want to see if it works in FF

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Make sure to follow the method in full, such as this:

    Code:
    html, body{height:100%;}

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2005
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    South Africa
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    may be this could be of some use


    <html >
    <head>
    <title>Untitled Page</title>
    <script type="text/javascript">

    function set_Position() {
    var obj = document.getElementById('DIV');
    var obj_width = parseInt(obj.style.width);
    var obj_height = parseInt(obj.style.height);
    var obj_top = parseInt(obj.style.top);
    var obj_left = parseInt(obj.style.left);
    var obj_right = obj_left + obj_width;
    var obj_bottom = obj_top + obj_height;



    var winW = 630, winH = 460;
    if (document.body && document.body.offsetWidth) {
    winW = document.body.offsetWidth;
    winH = document.body.offsetHeight;
    }
    if (document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.offsetWidth) {
    winW = document.documentElement.offsetWidth;
    winH = document.documentElement.offsetHeight;
    }
    if (window.innerWidth && window.innerHeight) {
    winW = window.innerWidth;
    winH = window.innerHeight;
    }


    var page_height = winH;
    var page_width = winW;

    obj.style.top = (page_height - obj_height) + 'px';
    obj.style.left = ((page_width / 2) - (obj_width / 2)) + 'px';

    } //end function set_Position()

    </script>
    </head>
    <body style="background-color: Black"; onload="set_Position();">
    <div id="DIV" style="border: 1pt solid red; width:400px; height: 200px; background-color:White; position: absolute; top:0px; left: 0px;" >
    </div>
    </body>
    </html>

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Blog Guy View Post
    I did
    The browser isn't reading it. I think the problem in the <style> tags in your style sheet. They shouldn't be there in an external style sheet.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2005
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah- I removed the <style> tags but still doesn't work if that's what you're referring to?

    ulrich- i haven't a clue as to what that code is about.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    I'm not at my main computer at the moment, so can't help right now, ut the best advice I can give is to go through the link I gave very carefully and check your code against that at every point. You have a lot of things in your code that are not helping you, from a brief glance.

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Even Paul's repeating himself in his code, weird.

    Anyway you haz...
    Code:
    html,body {height:100%;}
    html,body {margin:0; padding:0;}
    * html #wrapper {height:100%;}
    
    body {
    	font: 82.5% Arial, Helvetica, sans-serif; /*Resets 1em to 10px */
    	text-align: center; /*centers the text in IE6 */
    }
    #bodystrip {
    	text-align:center;
    	width:100%;
    	height:75px;
    	background-color:#2f2207;
    	}
    #wrapper {
    	text-align:center;
    	margin: auto;
    	width:900px;
    min-height:100%;
    margin-bottom:-200px;
    	}
    	
    * { margin: 0;	padding: 0; }
    It's hard to read when stuff's kinda all over the place, so for my own sanity I've reshuffled things a bit.

    Quote Originally Posted by Paul
    The method I prefer to act as a buffer is to drag the wrapper element upwards and then use a top border on the first element in the page (which is usually the header). The border width would be equal to the height of the footer and cause the page content to start neatly at the top and not above the monitor. I find this the cleanest method.
    So I'm going with that one for now.

    Code:
    html, body {
      height:100%;
    }
    html, body, ol, ul, p {
      margin: 0;
      padding: 0;
    }
    
    body {
      font: 100%/1.2 Arial, Helvetica, sans-serif; /*gives users the font size they have already chosen on their computers! Your text is microscopic on my screen!!! */
      /*text-align: center; does nothing because you have a doctype. IE6 also understands automargins. */
    }
    
    #wrapper {
      width: 900px;
      min-height: 100%;
      margin: -200px auto 0; /*drag #wrapper up by the height of "sticky box-wrapper"*/
    }
    * html #wrapper {height:100%;}/*IE6*/
    
    /*if you have someone on the page with 100% height, don't add someone else right before them! This is why your wrapper wasn't really 100% high... you can't then add this 75px-high box too!
    
    so I've placed it inside wrapper*/
    #bodystrip {
    	text-align:center;
    	width:100%;
    	height: 75px;
    	background-color:#2f2207;
            border-top: 200px solid #2f2207; /*this border should not appear on the page because its parent, #wrapper, has a negative top margin of exactly this amount*/
    }
    
    ...
    
    #box-wrapper {
        clear: both;
        height: 200px;
        margin: 0 auto;
        width: 900px;
    }
    Something like that.

    Where you'd need
    Code:
    <body>
      <div id="wrapper">
        <div id="bodystrip">
        ... nav, logo...
        </div>
    			
        <div id="pitch">
          <p>ShadowObjects LLC (SO) responds to...</p>
          <p>Our ability to... </p> 
        </div><!-- end pitch-->
      </div><!-- end wrapper-->
    
      <div id="box-wrapper">
        <div1/>...
        <div2/>...
        <div3/>
      </div><!-- end box-wrapper-->
    </body>
    </html>
    but that won't work because no div can be outside of the wrapper div. in order for it to work. I have the bodystrip div outside of the wrapper div.
    But see, that breaks the whole 100% idea.

    Most of the time, when you set someone to a % height, the browser ignores it. % height == "auto" to a browser unless the element's parent has an explicit (non-%) height. Which most of the time, you don't have, because boxes should be flexible and as high as their content.

    To get the wrappers to be 100% tall, the trick is this:
    - html and body elements are set to 100% tall
    - One (1) element who is a direct child of the body can now get either height: 100% or min-height: 100%. No-one else can get this. It's a one-time thing!
    - since wrapper is now 100% tall, you cannot then go add more to 100%.

    You can't take a candy bar and eat 110% of it. And no matter what those motivational hippies visiting corporate offices for way too much money tell you, you cannot give 110% of your effort, either. Physics and logic tell the power of positive thinking to go drown in the lake.

    So this means, not only does wrapper take up, you guessed it, 100% height of the screen, but anything ELSE who is a direct child of the body means now you're getting in trouble. Same with adding any top or bottom padding, margins or borders to the 100%-high wrapper. You end up with more than 100%, and only in the land of IE6 and fuzzy math can you really have more than 100%.

    The trick to the sticky footers then is you reduce that 100% a bit to make room for your footer. Which is why the only element who is a direct child of the body, and the only other element outside the wrapper, can still fit onscreen.

    We do this to start by knowing your footer is 200px high, so we give wrapper a -200px top margin. This pulls the first top 200px offscreen, above your monitor. Okay, so we have room for the footer, but now the top of your web page is gone, offscreen.

    So bodystrip has to be inside the wrapper like your pitch and everyone else is (unless you want to take it out of the flow like a fixed header).
    Since it's the first child inside the wrapper, I use him to hold the border. The border "soaks up" the negative margin so now bodystrip is back on the page where you need it.

    Adding a ginormous border to bodystrip doesn't cause problems with 100% height because it's inside wrapper instead of part it itself. You can stuff as much crap as you want into wrapper and it's not a problem... since we said "min"-height 100%, it can grow longer than the screen height to fit all the stuff inside.

    Sticky footers will ALL bump the footers off the bottom of the screen if the stuff inside the 100% high container get too much. It's only a way to have the footer stick to the bottom when the page is short, like your first page seems to be, except it's empty (I hope you give background colours to those pitches so they are readable even if people turn image off or never load them in the first place!)

    Unless you have a javascript reason to hold bodystrip outside the wrapper, you should be able to get what I'm seeing now by having it inside.

  11. #11
    SitePoint Enthusiast
    Join Date
    Jul 2005
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Stomme- Thanks so much for writing this up. Actually, I do have a JS reason which is what makes this more difficult to implement. I need the bodystrip div to have a background-color that stretches across the screen. Otherwise my design won't be complete. Make sense?

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    How is that JS related? I don't allow JS running and bodystrip is totally stretching across.

    What am I missing? (we can prolly still get around it)

    When I want strips that stay across a site I usually tend to have an outer (someone who stretches) and an inner (who keeps the stuff inside within certain widths).

    <div id="bodystrip">
    <div class="wrap">
    stuff inside
    </div>
    </div>

    bodystrip, you wouldn't put a width on (otherwise when screen is shrunk and then people scroll to the right, the background colour would stop), and .wrap is like width: 80% (or whatever page width is) and margin: 0 auto;

    Or you can fake it by giving % margins on the outer sides of your menu and logo too, depending on how exact it has to be. Like, if the menu has a left margin of like 10% or whatever and the logo right margin of 10%... but it would be more exact with an inner wrapper (and you can very likely remove a lot of those wrappers you have around the navigation too).


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
  •