Adjusting height of content and sidebar container

Question

I'm working on a theme, but am getting a huge gap between the last line of my content and the footer.

I've looked in Firebug to see where this is coming from and it seems to be this line -

<div id="ttr_content_and_sidebar_container" style="min-height: 513px;">

I can't see where in TemplateToaster I can adjust the height of the content and sidebar container?

Is there a minimum it should be set on, or can it be shown as zero?

Hope someone can advise,

Myles

Edit. I've gone through the style sheets in the theme, but I can't find the above line specifying a line height of 513px! I can't see where it's pulling this in from. Here's the url I'm testing the theme on -

http://www.internetsquad.co.uk/

Answer 1

Hello Magicalwonders,
You may need to adjust the margin and or padding settings of the content and footer areas. If these settings are wrong you can end up with large gaps or overlaps.
To adjust the content area margin settings, click on the Content tab at the top of TemplateToaster. In the Content settings block (left hand side), click on Content Properties button and place the curser over Margin on the drop down menu. The menu will then expand to show Top, Bottom, Left, Right. Move the cursor over Bottom, which then expands further to show various options in pixels to adjust it by. Clicking on More at the bottom of the menu brings up a dialog box where you can make further adjustments if necessary.
To check the Footer, the process is similar to the above but this time click on the Footer tab, Layout settings block, Margin, Top, Bottom, Left and Right. This time I suggest you check the Top settings. You will note that this has negative number options and selecting one of these moves the Footer up to the Content area. Too far and it will overlap slightly.
You may also need to check the padding settings.
I hope this helps to solve your problem.
George

Answer 2

Thanks for your response George,

I'll take a look at the settings you've detailed, as they look really useful. :) It turns out in this particular case that this issue was being caused by code in header.php for a sticky footer though. I'm copying response of support ticket as it may be relevant to someone else -

The style min-height is applied to <div id=\"ttr_content_and_sidebar_container\"> to have sticky footer. If you don't want this gap between content and footer then you just need to remove the script given in enclosed attachment(height.txt) from the theme's header.php file after exporting the theme.

<script type="text/javascript">
jQuery(document).ready(function(){
var window_height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var body_height = jQuery(document.body).height();
var content = jQuery("#ttr_content_and_sidebar_container");
if(body_height < window_height){
differ = (window_height - body_height);
content_height = content.height() + differ;
jQuery("#ttr_content_and_sidebar_container").css("min-height", content_height+"px");
}
});
</script>

Myles :)

Answer 3

Hello Myles,
I'm pleased you have the answer and thank you for posting the code. I think this is a very useful thing to do so that everyone can learn from it.
George