Problem clearing floats

Question

Here is an interesting problem. My page has a left sidebar, which is obviously floated left. In the main part of the page, I want to float an image so the descriptive text will be next to it rather than below it. I have multiple images to do this with. So, if I try and clear the left float, the images nest to the right of the previous image, crowding up underneath the text. This is not desirable. If I clear the left float, it puts the next image at the bottom of the left sidebar, also not desirable. Only the footer should go below the left sidebar. I have checked in a css book, it gives a couple ideas, but they don't work as their examples are not for nested floats like this.
Any ideas? Here is the page: http://www.hainingfamily.com/media.php
Thanks,
Mike

Answer 1

Include your anchor within the <div> too. Ive renamed the <div> class 'pictureLink'
<div class="pictureLink">
<img src="images/TheHainingFamilyPromoPic.jpg" alt="color picture" width="90" height="60" />
<a href="images/thehainingfamilypromopic.jpg" target="_blank">Color Picture in jpg format (546KB)</a>
</div><!-- end pictureLink -->
<div class="pictureLink">
<img src="images/TheHainingFamilyPromoPic.jpg" alt="color picture" width="90" height="60" />
<a href="images/thehainingfamilypromopic.jpg" target="_blank">Color Picture in jpg format (546KB)</a>
</div><!-- end pictureLink -->
Then use this css to 'clear' and 'flloat' the image left.
.pictureLink {
width: 280px;
overflow: hidden;
margin: 0 0 10px 0;
.pictureLink img {
float: left;
No need then for your <br class="clrlft" />. Overflow: hidden; on the .pictureLink <div> forfills that purpose and makes the code cleaner and easier to manage.