Solved

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

Posted on 2011-09-25
3
519 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 82

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
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 …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

744 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

14 Experts available now in Live!

Get 1:1 Help Now