Keeping a div stuck to the bottom

**Blog Guy** · Sep 8, 2011 15:59

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.

**ralph.m** · Sep 8, 2011 16:56

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

**Blog Guy** · Sep 8, 2011 22:22

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

**ralph.m** · Sep 8, 2011 22:34

Make sure to follow the method in full, such as this:

Code:

html, body{height:100%;}

**Blog Guy** · Sep 8, 2011 22:49

I did

**ulricht609** · Sep 8, 2011 23:32

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>

**ralph.m** · Sep 8, 2011 23:35

Originally Posted by Blog Guy

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.

**Blog Guy** · Sep 9, 2011 00:36

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.

**ralph.m** · Sep 9, 2011 01:30

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.

**Stomme poes** · Sep 10, 2011 05:43

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.

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.

**Blog Guy** · Sep 10, 2011 12:17

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?

**Stomme poes** · Sep 10, 2011 12:35

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).

User Tag List

Thread: Keeping a div stuck to the bottom

Thread Tools

Display

Keeping a div stuck to the bottom

Bookmarks

Bookmarks

Posting Permissions