Problems FLoating HTML List Around Image

I am having problems floating a list around an image.

I am work on my site http://www.taigoji.com The issue is most of the way down the page, where you see the picture of the man, with a ul list to the right. As you can see, the bullet points are overlapping the image.

Here is the HTML code:

<div style="margin: 5px; float: left; width: 130px;">
<img src="images/dave_hull.gif" width="125" height="200"><br>
<center><a href="http://corporate.taislim.com/popup/success_stories.html" target="popup" onclick="wopen('http://corporate.taislim.com/popup/success_stories.html', 'popup', 500, 450); return false;">Click here to read how Dave lost 31 pounds in just a few weeks!</a></center>
</div>

<center><h3>We 100% Guarantee That TAIslim Will Work For You Or Your Money Back!</h3></center>

We are so confident that TaiSlim will help you gain and maintain a healthy weight that we are putting our money where our mouth is. TaiSlim is covered by an ironclad, <b>90-day 100% money back guarantee</b>. If you don't get the results you want from TaiSlim, just send the empty bottles back for a full refund.
<br><br>
<b>Why We Are So Confident TaiSlim Will Work For You:</b>
<div>
<ul>
<li>The scientific research proves that TaiSlim works</li>
<li>user results prove that TaiSlim works</li>
<li>Tai is a comprehensive plan designed to work for everyone</li>
</ul>
</div>

HTML:

What am I doing wrong or neglecting? Thanks.

 

Do this:

ul {
  overflow: hidden;
  }

Code (markup):

Fir IE6, add this:

* html ul {
  height: 1px;
  }

Code (markup):

If either has a negative effect on other lists, you'll need to be more selective.

What that does is create a new block formatting context—that's what IE screws up with hasLayout. If you want to understand the concept, you'll need to do some heavy reading on a small part of the specs. I'll look up the section if you'd like.

cheers,

gary