Wrapping text around an image with in a div - html

Question

Im trying to wrap text around a div that has an image and some text on the bottom of it. I cannot seem to get the text wrapped.
html:
<div id="department-article-bottom" class="department-article">
<div id="article-photo">
<img src="includes/resources/images/DrNoemiBalogh.jpg" class='reverse alignleft' width="200" height="200" alt="Dr. Noemi Balogh, Attending, Anesthesiology">
<span id="photo-text"> Sunune Sayananondh, RN, and Juan Reyes, Special Procedure Technician, preparing patient for cardiac catheterization procedure</span>
</div>
<p>In the outpatient area, Bronx-Lebanon’s Cardiology practices are seeing more than 15,000 visits annually, providing comprehensive services in coordination with primary care and referring community physicians. Additionally, its Echocardiography and Nuclear Stress Testing Laboratories performed 10,000 echocardiograms (heart ultrasounds) and 3,000 stress tests in 2012. These facilities are internationally recognized for their high quality care.</P>
</div>
CSS:
.department-article {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style:normal;
color:#333;
width: 462px;
}
#article-photo {
clear:both;
width: 200px;
height: 200px;
padding-bottom: 5px;
margin-bottom:20px;
display:inline-block;
}
#photo-text {
font-family: "ff-din-web", Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
color:#155085;
padding:5px;
width:180px;
}