Solved

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

Posted on 2011-09-25
3
521 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 83

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 250 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

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
responsive divs setup - what am I doing wrong 2 67
CSS grid style change 2 34
Add animation to your css 12 32
Overlap photo won't go all the way to the right 1 9
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

920 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now