How can I wrap text around an image with specific spacing around the image?

I need some assistance in wrapping text around an image.   I am using Joomla1.5 and K2 to edit pages.    I have the text wrapped around the images (style:float to left), but I need to have spacing between the image and text exactly like this web page: http://www.coriell.org/about/meet-our-team 

Could you look at the code and let me know how to achieve this?  




<table style="width: 688px; height: 100px;" class="table" align="center" border="0">
    <tbody>
        <tr>
            <td>
                <h4>Jennifer Hoheisel, MS</h4>
                <div>
                    <p><span class="bio-title">Associate Professor of Philosophy</span><br />Jennifer Hoheisel, MS is an Associate Professor of Philosophy, the Coordinator of Liberal Arts, and the Honors Program Director at Camden County College. She is also a visiting fellow at Princeton University in the Bioethics and Genomics program.</p>
                    <p>&nbsp;</p>
                </div>
            </td>
            <td>
                <h4>Marc Lenburg, PhD</h4>
                <p><img style="float: left;" alt="marc" src="assets/images/personalized-medicine/icob/marc.jpg" width="67" height="50" />&nbsp;<span class="bio-title">Assistant Professor of Genetics and Genomics</span><br />Marc Lenburg, PhD, is an Assistant Professor of Genetics and Genomics at Boston University School of Medicine. He is an expert in biostatistics and bioinformatics and the designer of the GMED (genomic medicine) website for distribution of genetic associations for the Framingham Heart Study.</p>
            </td>
        </tr>
        <tr>
            <td>
                <h4>Steven Murphy, MD</h4>
                <div>
                    <p><img style="float: left;" alt="Steven Murphy, PhD" src="assets/images/personalized-medicine/icob/murphy.jpg" width="67" height="67" /><span class="bio-title">Managing Partner and President of The Personalized Medicine Group</span><br />Steven Murphy, MD, is the Managing Partner and President of The Personalized Medicine Group in New York, NY, and Greenwich, CT. He is a clinical instructor in Cell Biology and Anatomy at New York Medical College and a Yale Affiliated Hospitals speaker. Dr. Murphy is a thought leader in personalized medicine and the author of Gene Sherpas: Personalized Medicine and You, a popular personalized medicine blog.</p>
                </div>
            </td>
            <td>
                <h4>Ellis J. Neufeld, MD, PhD</h4>
                <p><span class="bio-title"><img style="float: left;" alt="Ellis J. Neufeld, MD PhD" src="assets/images/personalized-medicine/icob/neufeld.jpg" width="67" height="67" />Associate Chief of the Division of Hematology/Oncology</span><br />Ellis J. Neufeld MD, PhD is presently Associate Chief of the Division of Hematology/Oncology at Children's Hospital, Boston, and Professor of Pediatrics at Harvard Medical School, where he holds the Egan Family Chair in Transitional Medicine.</p>
            </td>
        </tr>
                </div>
            </td>
        </tr>
    </tbody>
</table>
<div class="clr"></div>

Open in new window

dee43Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
user_nConnect With a Mentor Commented:
It is done with
margin-right: 12px;
for the image class
0
 
Dave BaldwinFixer of ProblemsCommented:
Add margins to the images.  Your example link has classes for the different kinds of images with the margins they want.  Below is one of their classes.  More info about margins: http://www.w3schools.com/css/css_margin.asp
.category-items .leading-item img,  #main .subcategories .subcategory img {
	float: left;
	margin: 4px 10px 0 0;
}

Open in new window

0
 
dee43Author Commented:
That did it.  Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.