WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Problems Aligning multiple images with text (3 posts)

  1. alexisrua
    Member
    Posted 4 years ago #

    This is my first time posting i hope my question is answered quick. I have tried the things that come to mind to solve this but i am stuck. Please help me.

    I am trying to set the images to line up on the left with the corresponding text to the right of that image.

    In the image the first one (peter) is set up the way that i want them but it seams like a they just want to keep crashing and piling up onto each other.
    http://www.newsite.mbodyslo.com/wp-content/themes/ColdStone/images/Problems%20with%20images.png

    Thanks in advance for your help!

    <img class="alignleft" style="border: 5px solid black; margin: 5px;" title="Peter Sterios" src="/wp-content/images/teachers/headshot_peter.jpg" alt="Peter  Sterios" width="200" height="289" />
    
    <strong><span style="text-decoration: underline;">Peter Sterios</span></strong>
    
    A co-founder of m.BODY and Director of our Teacher Training Program,  Peter’s teaching reflects over 3 decades of study and practice in the US  and India. Peter’s articles have appeared in Yoga Journal since 1991  and is a former contributing editor. He teaches workshops and retreats  nationally and internationally. He also founded Manduka, a leading  eco-yoga products company, in 1997. His first yoga DVD "Gravity &  Grace: Yoga for Finding Your Inner Teacher" was released in 2007 and was  recently selected as “one of the top 15 yoga DVD’s of all time”  (R.Rosen, YOGA JOURNAL). For more information about Peter’s programs,  visit <a title="blocked::http://www.petersterios.com/" href="http://www.petersterios.com/">www.petersterios.com</a>
    
    <strong>
    </strong>
    
    <img class="alignleft" style="border: 5px solid black; margin: 5px; vertical-align: text-bottom;" title="tawny" src="/wp-content/images/teachers/headshot_tawny01.jpg" alt="" width="200" height="300" />
    
    <strong>Tawny Sterios</strong>
    
    <strong> </strong>A co-founder of m.BODY, Tawny is a certified kundalini yoga teacher who brings her passion for yoga and her lighthearted presence to all of her classes. Her teaching style is very approachable and accessible to students of all levels. She also is a mother of a very energetic 2 year old.
    
    <img class="alignleft" style="border: 5px solid black; margin: 5px;" title="amber" src="/wp-content/images/teachers/headshot_amber01.jpg" alt="" width="200" height="222" />
    
    <strong>Amber Sandoval</strong>
    
    A graduate of The Sivananda  Yoga-Vedanta Forest Academy, Amber's teaching style reflects a  lighthearted approach to yoga designed for the everyday person. Her  classes are delightful and she invites all levels of students to her  classes.
    
    <img class="alignleft" style="border: 5px solid black; margin: 5px;" title="Jillian" src="/wp-content/images/teachers/Jillian-Headshot.jpg" alt="" width="200" height="150" />
    
    <strong>Jillian Trilliam</strong>
    
    Jillian began yoga over 11 years ago in San Luis Obispo and has included journeys to explore the cultures and traditions of Asia, Central & South America, and New Zealand. Her experience during her travels has allowed her to expand her understanding of yoga and recognize that a true yoga practice comes from the willingness to surrender and work through our limitations. She has completed both a 200 and 500 hour teacher training program and her classes are a sharing of this experience and her yoga explorations for students of any level.
    
    <img class="alignleft" style="border: 5px solid black; margin: 5px;" title="julia" src="/wp-content/images/teachers/headshot_julia.jpg" alt="" width="300" height="211" />
    
    <strong><span style="text-decoration: underline;">Julia Loveshine</span></strong>
    
    Dancer. Yogini. Weaver of movement, singing, massage, laughter, hiking, drumming, yoga, peace, community, opening into infinite luminous universe, riding the ebbs and flows of life gracefully, honoring divine presence, healing of hearts, nurturing, growing nourishing food, mystery’s blossoming lotus, breathing soulful gratitude.

    Style

    img.centered { display: block; margin-left: auto; margin-right: auto; }
    
    img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; }
    
    img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; }
    
    .alignright { float: right; }
    
    .alignleft { float: left }
  2. Andrei Olsen
    Member
    Posted 4 years ago #

    Basically what you want is the following structure (the problem will go away then):

    <div class="bio">
    <img>
    text
    </div>
    
    <div class="bio">
    <img>
    text
    </div>
  3. alexisrua
    Member
    Posted 4 years ago #

    I had solved this by creating a table

Topic Closed

This topic has been closed to new replies.

About this Topic