Problem with Javascript to show/hide divs

[invisible kid]

Hi,

I'm using the following javascript to show/hide DIVs:

<script>
function toggleDiv(theDiv)
{
var elem = document.getElementById(theDiv);
elem.style.display = (elem.style.display == "none")?"":"none";
}
</script>

And the following HTML


<div class="albumsRow">
<a href="" onMouseOver="toggleDiv('albumInfo1'); return false;"
onMouseOut="toggleDiv('albumInfo1'); return false;">
<img src="./img/85x85Border.gif" style="display:block;" name="albumImage1" />
</a>
<a href="" onMouseOver="toggleDiv('albumInfo2'); return false;"
onMouseOut="toggleDiv('albumInfo2'); return false;">
<img src="./img/85x85Border.gif" style="display:block;" name="albumImage2" />
</a>
</div>

<div id="albumInfo1" style="display:none;">
content
</div>
<div id="albumInfo2" style="display:none;">
content
</div>
<div class="clear"></div>


and the following CSS:


.albumsRow {
width:643px;
height:85px;
margin-bottom:10px;
}

#albumInfo1, #albumInfo2 {
width:132px;
float:left;
}


So, when I mouse over, either albumInfo1 or albumInfo2 should display.

This works fine in Firefox, the problem I'm having is that in IE when the bottom div (albumInfo2) is being shown it leaves a massive gap where the top one (albumInfo1) presumably is, rather than displaying them both in the same place.

How do I stop it leaving this gap?