toggle div fills up remaining space in IE but not google chrome or firefox

Question

I use the toggle function for jQuery to toggle 4 blocks of content.

Screencast of how it works properly in Google Chrome: http://screenr.com/w8l

Screencast of how it does not work, in IE 7: http://screenr.com/I8l

See page for yourself: http://www.herkimer.edu/impact

For each header (h2) you click on, it starts the section on a new line, but in IE 7 it displays it

Example html:

<div class="divide-details">
  <h2><a href="#" title="view Student Perspective" class="student-perspective">Student Perspective</a> <a href="#" title="view Student Perspective" class="student-perspective"><span>&raquo;</span></a></h2>
  <div id="student-perspective-details">
        <p>Content</p>
    <div class="clear-both"></div>
  </div>
</div>

<div class="divide-details">
  <h2><a href="#" title="view Social Perspective" class="social-perspective">Social Perspective</a> <a href="#" title="view Social Perspective" class="social-perspective"><span>&raquo;</span></a></h2>
  <div id="social-perspective-details">
    <p>Content</p>
    <div class="clear-both"></div>
  </div>
</div>

<div class="divide-details">
  <h2><a href="#" title="view Taxpayer Perspective" class="taxpayer-perspective">Taxpayer Perspective</a> <a href="#" title="view Taxpayer Perspective" class="taxpayer-perspective"><span>&raquo;</span></a></h2>
  <div id="taxpayer-perspective-details">
    <p>Content</p>
    <div class="clear-both"></div>
  </div>
</div>

<div class="divide-details">
  <h2><a href="#" title="view Business Perspective" class="business-perspective">Business Perspective</a> <a href="#" title="view Business Perspective" class="business-perspective"><span>&raquo;</span></a></h2>
  <div id="business-perspective-details">
    <p>Content</p>
    <div class="clear-both"></div>
  </div>
</div>

CSS

#student-perspective-details,
#social-perspective-details, #business-perspective-details, 
#taxpayer-perspective-details { display:none; border-bottom:1px solid #ccc; clear:both; overflow:auto; width:100%; clear:both; }

.divide-details {
  float:left;
  margin:0 0 5px 0;
  padding:5px;
}

.divide-details h2 {
  font-size:1.5em;
}

.divide-details h2 a:link,
.divide-details h2 a:visited { color:#000; text-decoration:none; }

.divide-details h2 a:hover { color:#01552E; text-decoration:underline; }

.divide-details h2 a:link span,
.divide-details h2 a:visited span { color:#C56B02; text-decoration:underline; }

.divide-details h2 a:hover span { color:#01552E; text-decoration:underline; }

jQuery to toggle

$(document).ready(function() {
    $('.student-perspective').click(function() {
    $("#student-perspective-details").slideToggle(100);
        return false;
    });

  $('.social-perspective').click(function() {
    $("#social-perspective-details").slideToggle(100);
        return false;
    });

    $('.taxpayer-perspective').click(function() {
    $("#taxpayer-perspective-details").slideToggle(100);
        return false;
    });


    $('.business-perspective').click(function() {
    $("#business-perspective-details").slideToggle(100);
        return false;
    });

    $('.student-perspective span').click(function() {
    $("#student-perspective-details").slideToggle(100);
        return false;
    });

  $('.social-perspective span').click(function() {
    $("#social-perspective-details").slideToggle(100);
        return false;
    });

    $('.taxpayer-perspective span').click(function() {
    $("#taxpayer-perspective-details").slideToggle(100);
        return false;
    });


    $('.business-perspective span').click(function() {
    $("#business-perspective-details").slideToggle(100);
        return false;
    });
});

Answer 1

Without truly getting in to the nitty gritty of why or how it's not working, an easy fix would probably be to apply a callback function on the slideToggle that would toggle the float:left property from the .divide-details DIV. I would imagine that removing it when the slideToggle activates, and putting it back once it's done would solve your cross-browser issue.

An alternative solution would be to set the H2 elements as inline on page load (so you don't mess up the rendering for those without JS enabled), remove the float:left setting, and toggle a display:block on/off when toggling your details DIVs.