How do I get IE to properly reposition an element after a sibling resizes vertically?

Question

I have the following markup:

<nav id='tab_links'>
  <a href='#view1'>One</a>
  <a href='#view2'>Two</a>
</nav>
<div id='container'>
  <div id='view1'>Short Content</div>
  <div id='view2'>Much longer content</div>
</div>
<footer>
 <input type='submit' />
</footer>

and the following styles:

#view2 { display: none; }
#footer { display: block; clear: both; text-align: right; }
#footer * { display: inline-block; text-align: center; }

I use the following jQuery to swap out the views:

$('#tab_links a').click(function() {
  var tabToShow = $($(this).attr('href'));
  var otherTabs = tabToShow.siblings();
  tabToShow.show();
  otherTabs.hide();
});

When I swap out the view1 content for the view2 content, the footer stays where it was, hovering above the middle of the new content. If I hover the mouse over the footer content, it jumps down into place. If I then revert the content back to view1, the footer again stays where it was for view2, which is far below the end of the container.

What styles can I apply to make IE reposition the footer appropriately? I've tried all of the following, in various combinations:

• apply clearfix to #container
• apply clearfix to #footer
• apply height: auto to #container
• apply height: 30px to #footer input
• apply widgth: 100px to #footer input

Answer 1

Sometimes a simple "overflow: auto; width: auto;" applied on the #container will solve the problem.

See this: http://www.atbskate.com/trusktr/2010/03/05/clearing-floats-with-the-overflowauto-css-property/

Or this: http://www.quirksmode.org/css/clearing.html

Was that the solution to your problem?

Answer 2

A solution is to treat it as a jQuery problem instead of a CSS problem.

First, define a forceRedraw function on jQuery elements that simply sets the element's class to its existing class:

jQuery.fn.extend({
  forceRedraw: function() {
    jQuery(this).each(function() {
      this.className = this.className;
    });
  }
});

Then, when swapping the views:

$('#view1').hide();
$('#view2').show();
$('#footer').forceRedraw();

(This solution was suggested on the jQuery forums)