Img + UL alignment with CSS
I'm working on updating an old site and I ran into the following simple, but deprecated code:

    <img src="thumbnail_image.jpg" align="right">
    
    <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    </ul>

This code allows for the un-ordered list to run ragged against and then below the image, taking up the width of the parent container holding both elements.  In trying to recreate this in CSS, the following is the closest that I could come to getting the same effect.

    <div class="floatRight">
    <img src="thumbnail_image.jpg">
    </div>
    
    <div class="floatLeft">
        <ul>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        </ul>
    </div>
    
    <div class="clear"></div>

This solution allows for me to float the thumbnail_image to the right of the UL tag, however if the UL list is larger than the image, the LI links do not run ragged underneath the image like they do when using the deprecated align attribute.  This seems to be related to my second issue which is I have to set a width on the UL list, or else the two elements will not float next to each other.  Is there any way to get around having to explicitly state the UL width?
Img + UL alignment with CSS
===

I'm working on updating an old site and I ran into the following simple, but deprecated code:

    <img src="thumbnail_image.jpg" align="right">
    
    <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    </ul>

This code allows for the un-ordered list to run ragged against and then below the image, taking up the width of the parent container holding both elements.  In trying to recreate this in CSS, the following is the closest that I could come to getting the same effect.

    <div class="floatRight">
    <img src="thumbnail_image.jpg">
    </div>
    
    <div class="floatLeft">
        <ul>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        </ul>
    </div>
    
    <div class="clear"></div>

This solution allows for me to float the thumbnail_image to the right of the UL tag, however if the UL list is larger than the image, the LI links do not run ragged underneath the image like they do when using the deprecated align attribute.  This seems to be related to my second issue which is I have to set a width on the UL list, or else the two elements will not float next to each other.  Is there any way to get around having to explicitly state the UL width?