hi there I'm a newbie and would like to know what the heck goes on with IE and floats

so far it works fine in firefox, netscape and opera but in IE a float that should overlap its containing box is comnpletely swallow by such containing box , I've already check some tricks but none seems to work fine

here is the code

#top {
margin: 10px 20px 0px 20px;
padding: 10px;
border: 2px solid #fff;
background: #FF99FF;
height: 100px; /* ie5win fudge begins */
voice-family: "\"}\"";
height: 170px;
html>body #top {
height: 170px; /* ie5win fudge ends */
}and then in the page:
<div id="top">
<div id="imagen"><img src="wonderhibiscussmall2.gif"></div>

the image overlaps the top container in all browsers except in IE

anybody has any idea why is this ?

thanks pals !