?
Solved

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

Posted on 2011-09-25
3
Medium Priority
?
537 Views
Last Modified: 2012-05-12
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

0
Comment
Question by:dee43
3 Comments
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 36595529
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
 
LVL 9

Accepted Solution

by:
user_n earned 1000 total points
ID: 36595572
It is done with
margin-right: 12px;
for the image class
0
 

Author Closing Comment

by:dee43
ID: 36595809
That did it.  Thanks!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

616 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question