CSS floating div's being obscured in IE6/Win

[Quagmire]

I'm trying to create a utility bar for an intranet application using CSS positioning. I want breadcrumbs to be flush left, then some links on the right. The problem is, in Windows IE 6, if I give the containing div (#Utilties) a background-color (gray), the two items (#Breadcrumbs, #OtherNavigation) in it go behind the gray box.

I'm doing this in the markup (XHTML transitional):

<div id="Utilities">

<div id="Breadcrumbs">
(breadcumb navigation here...)
</div>

<div id="OtherUtilities">
(other stuff here...)
</div>

<div class="Spacer">&nbsp;</div>

</div>

And the CSS:

#Utilities { background-color: #ccc; }
#Breadcrumbs { float: left; }
#OtherUtilities { float: right; text-align: right; }
.Spacer { clear: both; font-size: 1px; }

(the Spacer div is so the outer, gray box expands to be the full size of its contents.)

Anyone have any ideas on how to make the contents visible? I tried z-index reordering, visibility, re-ordering in the CSS file. I tried absolute positioning but ran into other problems.

I know tables will work, but I'm giving it the college try to go 100% CSS layout, for structural as well as educational purposes.

Thanks!

P.S. Everything looks fine in Mac browsers (IE, Chimera) but I haven't tried other Windows browsers.

[moonbiter]

Question: Do you have other content going into the div#Utilities?

If not, then I don't think you need the float:right on the div#OtherUtilities (your text is right-aligned anyway). Because of this, you don't need the div.Spacer either.

I don't know if this will fix your problem or not, because I can't seem to replicate it either way (tested in IE 6, Mozilla 1.1, Opera 6.05).

[Quagmire]

Thanks for the reply. There isn't any other content in the Utiltities div.

But I fixed it. I did a combination of no positioning (for the right, #OtherUtilities, div) and absolute positioning for the left (#Breadcrumbs) and it worked.