Solved

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

Posted on 2011-09-25
3
530 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

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

This script checks a path to see if a folder exists. If the folder does exist you will get output "The folder has previously been created. No action taken" If not it will create the folder. Then adds one user modify permission to the folder. It …
Read about how to choose the best possible content marketing agency to suit your needs. Content marketing has become an integral part of running a successful tech business, so it is wise to be informed.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

630 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