Float problem - how to close the bottom of the div right?

hello,
I want to show a list of items each one includes an image, and text beside it. Here is the code for each item:
<div style="width:500px; padding-bottom:10px; border-bottom:0.05em dashed #5D739A;">
<div style="float:left; margin: 5px 2px 2px 2px;">
<img src='http://www.ha-lool.co.il/uploads/Gen_46/19012007212342~@~flower.jpg' ALT='הלול התחדש במראה ובתוכן'>
</div>
<div style="clear:right; padding:1px 2px 5px 5px">
<h3>Flowers garden</h3>
<p style="margin:0 10px 10px;">This a short text. I'll write a few more words, blah blah blah.</p>
</div>
</div>

My problem is in cases the text is to short to reach the end of the image. In this case, the border of the first div is showing below the text, instead of showing below the image. How do I fix this?

I forgot to add the link: http://halool.co.il/test/css1.htm

You need to clear your floats. Read this: http://www.positioniseverything.net/easyclearing.html

Thank you! this was very helpfull.

Some more information:
Containing Floats (http://www.complexspiral.com/publications/containing-floats/) explains the float model.
Clearing Space (http://css-discuss.incutio.com/?page=ClearingSpace) shows other ways of clearing floats, including a method I find easier and cleaner: overflow: auto.

Also, you’ve used the HTML 4.01 Frameset document type declaration for a non‐frames document which is incorrect. You probably want either the Transitional or Strict document type declaration (http://www.w3.org/QA/2002/04/valid-dtd-list.html).