Brilliant thank you for our help, another thing is I am trying to get the footer on screens above 980px to always be at the bottom of the screen I have tried this
var $main = $('.x-main'),
$windowHeight = $(window).outerHeight(),
$masthead = $('.masthead').outerHeight(),
$wpbar = $('#wpadminbar').outerHeight(),
$footer = $('.x-colophon.bottom').outerHeight() + $('.x-colophon.top').outerHeight() + 80;
$main.css('min-height', $windowHeight - $masthead - $wpbar - $footer);
it works (almost) but it seems to be just below the screen area, around the size of the header I have so you have to scroll a bit to see the footer, any ideas on how to fix this?