[Solved] IE issue: large margins adjacent to floated column

Hi all,
I'm having an issue in Internet Explorer with content adjacent to floated DIVs in our web site. Basically, the navigation menu at the left is floated left, as is the container for the 'content' area - but Internet Explorer expands the first DIV in the content area (in this example, the 'search info' area with the '49 results returned' text and the 'Search again' box inside it) so that its bottom edge is level with the bottom of the navigation menu.

The HTML and CSS are both valid, and I've attached a Tidy-ed version of the HTML with absolute references embedded - so you just need to download it and double-click. The CSS is also attached. A screenshot from Safari showing how it's supposed to look can be seen at this link. Here's the live version of the page.

The same symptoms as I'm having problems with in IE were also visible in Firefox and Safari until I added overflow: hidden; to each content area box.

The sidebar has these properties:

div#sidebar{
background:#e6edf3;
width:184px;
float: left;
}


The container for the 'content' area has these properties. The margin-left of 184px is to get past the navigation bar.

div#wrapper{margin-top: 0;
margin-bottom: 0;
margin-left: 184px;
padding-left: 10px;
width: auto;}


I've used the Clearfix class on the inner DIV of the 'search info' area and each record, but I am assuming that it's not causing this problem as when I remove this class, the problem is still evident.

Many thanks in advance for your help.