Hi I'm having a little trouble getting IE6/7 to do what I want.

I have a (container) div which contains an image and another div with text in. The code for this is below.
Code:
<div class="figure"><img src="/img.php?src=trialsexample.jpg" alt="Trials unicyclist"  /><div>Figure 1: a unicyclist jumping a gap on a trials course</div></div> <p>Trials unicycling is a type of unicycling that focuses on trying to overcome various natural or urban obstacles without falling off or putting a foot or hand down. The sport derives from bike trials although competitions are performed differently. Unicycle trials competition lines allow..</p>
I then use CSS to float the (container) div to the right. This is done using the code below
Code:
.figure { clear: right; float: right; margin: 5px 5px 5px 5px; }  .figure img {display:block; margin-left: auto; margin-right: auto;}  .figure div  { font-size:0.9em; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; display: block; text-align:center; margin-left: auto; margin-right: auto; max-width:20em; }
In Firefox 3, this renders as I want with the text in the <p> wrapping round the text around the floated container.

The page can be seen here => http://www.unicycle.org.uk/uuu/trials/about

In IE6/7 this doesn't work at all. For some reason the (container) div has 100% width of its parent container. I don't want to declare a width for the (container) div because I want it to resize depending on the image inside it.

I've found even if I declare a width for the (container) div the text in the <p> does not go in the right place and it get's pushed underneath the floated (container) div.

Does anyone know how I can fix this to work in IE6/7?