Your "left-area" div has an inline height being defined when the page is rendered. This is usually because there is an "equal height column" jQuery script that dynamically adjusts the heights of 2 or more columns on the page. This script is not adjusting the column height to accomodate your form properly. This often happens when you use this kind of script with conditional logic. The height script runs when the page loads, but the form height changes when certain fields change. The page doesn't reload so the height script can't recalculate and since the form is now taller than the specified height, the form overflows the vertical boundary and the footer.
If you disable the inline height property, the formatting fits in the content area properly without overflowing the footer.
In just a quick look, it appears that the script is located at the end of your theme's custom.js file
var $et_left_area = jQuery('#left-area'),
$et_sidebar = jQuery('#sidebar');
if ( $et_left_area.innerHeight() < $et_sidebar.innerHeight() ) $et_left_area.css( 'height', ( $et_sidebar.innerHeight()+15 ) );
Since this is a theme issue, my suggestion is to discuss this with your theme provider and see what solution they suggest to solve the overflow issue.
Posted 11 years ago on Thursday June 16, 2011 | Permalink