toggle display and parent height problem

toggle display and parent height problem

I have a setFooter function that's called on load which pins my footer to the bottom of the window if the page content is too short. It does this by stretching #content's height if necessary. This works great.

But I have some pages that include a link that, when clicked, toggle the display state of a div. This div is inside #content. Because setFooter writes a height style into the #content div tag, when the toggle div opens, although the window gets taller, #content doesn't stretch and footer remains where it is. Makes perfect sense. So I tried setting #content's height to auto first, then calling setFooter again but no luck. The really weird thing is that Firebug shows #content's height being set the 2nd time to the same height as previously. But although #content is floated, the inner, toggled div is not, so I've no idea why that would be.

Here's the code:

  1. function setFooter()
  2. {
  3.     var window_h = $(window).height();
  4.     var header_h = $('header').outerHeight(true);
  5.     var auxiliary_h = $('#auxiliary').outerHeight(true);
  6.     var content_h = $('#content').outerHeight(true);
  7.     var footer_h = $('footer').outerHeight(true);
  8.     if (window_h > (header_h + auxiliary_h + content_h + footer_h) )
  9.     {
  10.         $('#content').height(window_h - (header_h + auxiliary_h + footer_h));
  11.     }
  12. }

  1. $('#lnk_add_image').data('toggle_text', 'cancel').click(function(e)
  2. {
  3.     var txt = $(this).data('toggle_text');
  4.     e.preventDefault();
  5.     $(this).blur();
  6.    
  7.     $('#content').css('height', 'auto');
  8.     $('#gallery_add_image_form').toggle('slow');
  9.     $(this).data('toggle_text', $(this).text())
  10.     $(this).text(txt);
  11.    
  12.     setTimeOut(setFooter(), 20);
  13. });

As you see, I thought that maybe a timeout was called for. But this hasn't helped at all.

FWIW, here's the CSS:

  1. #content { float: left; padding-left:40px; margin-right:10px; width:590px; margin-top: 18px;}
  2. #content:after {content:"\0020";display:block;height:0;clear:left;visibility:hidden;overflow:hidden;}