Click event for div with two floated elements on IE6

Question

I have a <div> with two floated elements inside of it. I'm using jQuery to attach a click event handler to this <div>. The handler only gets called when I click one of the two floated elements. The empty space inside of the <div> does not work.

Here's what the markup looks like:

<div class="wrapper">
  <h4>Some lovely header text here</h4>
  <img src="images/plus.png"/>
  <div style="clear: both;"/>
</div>

Here's my Javascript (I'm using some other events, too):

// Expand scenarios when clicked on
scenario_header.live("click", function() { 
  $(this).toggleClass("expanded");
  $("+ div", this).slideToggle();
});

// Toggle hover class when hovering
scenario_header.live("mouseover", function() {
  $(this).toggleClass("hover");
});
scenario_header.live("mouseout", function() {
  $(this).toggleClass("hover");
});

This works perfectly in Firefox. Any ideas?

Answer 1

I guess you have to apply some additional CSS so that the wrapper DIV really wraps its children. Something like this should be enough:

div {
 overflow: hidden;
 display: inline-block; /* weird stuff, but it's needed for IE6 */
}
div {
 display: block; /* needed to reset display for non IE6 browsers */
}