Even Paul’s repeating himself in his code, weird.
Anyway you haz…
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.
So I’m going with that one for now.
html, body {
height:100%;
}
html, body, ol, ul, p {
margin: 0;
padding: 0;
}
body {
font: [b]100%/1.2[/b] 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: [b]-200px[/b] auto 0; /*drag #wrapper up by the height of "sticky box-wrapper"*/
}
* html #wrapper {height:100%;}/*IE6*/
[b]/*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*/[/b]
#bodystrip {
text-align:center;
width:100%;
height: 75px;
background-color:#2f2207;
[b]border-top: 200px solid #2f2207;[/b] /*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
<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.