Prosím o pomoc / Patička stránky dole / kde mám chybu

Dobrý den, prosím, prosím prosím o pomoc.
Netuším kde mám chybku. Snažil jsem udělat
patičku stránky dole, ale vylezá mně nad DIV wrap-content,
místo aby byl až pod ním a schovává mně dolní menu
které je součástí wrap-content.

Stránku mám v jednom containeru a v něm tři samostatné
obaly (wrap-header, wrap-content, wrap-footer) protože
v budoucnu chci mít možnost měnit pozadí, těmto třem pruhům
libovolně. A teprve v nich mám header, content a footer
se zarovnáním na střed stránky pomocí margin: 0 auto.

Ukázka zde...

Netušíte prosím kde je chyba.

Děkuji za rychlou odpověď. Právě že jsem potřeboval aby velikost patičky byla
třeba 200px na výšku a byla ještě dole. Když vypnu to absolutní pozicování, tak
je sice dole, ale delší než 200px.

Myslel jsem, že když CONTAINER bude mít pozici relativní a WRAP-FOOTER absoultní
se zarovnáním dolů, tak to bude fungovat :(

Mohu se prosím zeptat jaký JS používate?

Ještě jednou děkuji za pomoc. Konečně vidím světlo na konci tunelu :)

Tak jsem to předělal podle plaváčkova řešení a stejně to dělá stejnou chybu.
Tady je ukázka krátké stránky
a tady s obrázkem

Asi bude někde chyba v tom, že mám ty tři:
wrap-header, wrap-content, wrap-footer
na šířku celé stránky...

Panenko skákavá, babo raď, kde je chyba, kurňa...

Nemáte prosím nějaké řešení?

Vyzkoušel jsem Plaváčkuv návod, stáhl si podklady, ale při delším textu
se mně patička zobrazuje nad textem a schovává ho. Ukázka zde Nechápu proč,
ale Chrome, Safari a Firefox to prostě nezobrazují správně.

Hledal jsem na webu a našel jedno řešení které vychází z mínusového
umístění obalu wrapper v rámci margin-bottom a přidaného jednoho prvku
DIV (název v ukázce .push) o stejné výšky jako je patička. Patička je umístěna
až pod obalem Wrapper.

Ukázka s delším textem
Ukázka s kratším textem

Nemáte prosím zkušenosti jestli toto řešení je správné?