Gap below my footer - css

I have a css problem, there seems to be a gap below my footer and I cannot get rid of it.
I would like the bottom of the page to go all the way to the bottom of the screen.
please help
thank you
http://ottawafitnesstraining.com/

It is the content of clearfix:after in the footer that is overflowing its zero height box. You can e.g. hide the overflow or apply zero font-size to stop that.

.clearfix:after {content:'.';display:block;clear:both;visibility:hidden;height:0; [COLOR="Red"]font-size:0[/COLOR]}

I’d say ditching the clearfix for natural clearing behavior on the parent element is the better choice of the two, since generally it’s less code.

Just be sure in addition to setting an overflow state like overflow:hidden you include a haslayout trigger so IE6/earlier wraps floats too.