CSS - Why does height seem to be set, when it's not?

Question

Ok, this is really annoying and I can't understand why this is even happening. I may have screwed some stuff up when trying to get the CSS Sticky footer to work.

I had one going on, but it seemed at the body wasn't liquid so I thought I'd try this one: http://ryanfait.com/sticky-footer/

But the results ended up like this: http://www.serverbart.com/film/

The blue box is supposed to resemble a gallery, so nevermind the color :p I guess you'll understand what I'm trying to do, and I'm open for input about redesigning the div structure! I'm trying to get really good at different layouts and this one has been bugging me a bit.

Answer 1

You are not following Ryan Fait's example. For starters, the push goes inside wrapper.

Answer 2

The height for the push and the footer must be the same. The push must go inside the wrapper.

Answer 3

It's because you have this:

<div id="mainWrapper">
    <div id="content"></div>
    <div id="push"></div>
    <div id="footer"></div>
</div>

It took me forever to figure out what i was doing wrong the first time i created a sticky footer as well and it has to be like this

<div id="mainWrapper">
    <div id="content"></div>
    <div id="push"></div>
</div>

<div id="footer">
</div>

You have to explicitly have 2 divs as your outermost divs, not just one main wrapper.