2 column div float

I have a dynamic product page that im trying to convert to a tabless design.
One row 2 columns, left coulmn product image, right column product description.
Heres what i have so far

#item-txt {
float:right; 
width:70%; 
text-align:left; 
margin:0px 0px 30px 0px;


}
#item-img {
float:left; 
width:30%; 
text-align:center; 
margin:0px 0px 20px 0px;



<div>
  <div id="item-txt">
    <p>Description</p>
  </div>
  <div id="item-img">
    <img src="/image.jpg" class="image_style" /></a>
  </div>
</div>

My problem is, when i shrink down the page the product description will go under the image. I want description div to stop before it hits the image.

Hope you can help,
Thank you!