[TwentyTwelve] Footer jumps up at browser resize

Hello,

i’m editing a child theme for the TwentyTwelve theme and can’t get footer to stick to bottom.

When a browser is fullscreen, everything is fine. However, when i shrink the browser window the footer jumps up.

Here are a couple of screenshots of the problem:
[IMG]https://www.imagesup.net/dt-6141777576712.png[/IMG]
[IMG]https://www.imagesup.net/dt-7141777585710.png[/IMG]

I use HTML module of Ether Builder to paste elements into pages, if that helps. I’ve been using it with other themes for a long time with no problems.

My CSS for the footer looks like this:

footer#colophon {
    width: 100%;
    max-width: 100%;
    height: 50px;
    text-align: center;
    background: #444;
    clear: both;
}

How do i make it a part of the elements flow, so that it goes after all elements?

Thank you!