Aligning Photos and Text

Hi,

I’m trying to align text beside some pictures. First I had just used the BR code to move the text down beside the photos. But I soon discovered after signing on to my laptop (which uses a lower resolution) the text would move all over the page instead of where it was on the other computer with higher resolution.

How do I get the text to align perfectly centered beside the photo?

An example of my problem: http://www.babynatali.ca/home/?page_id=53

Click “Natali’s Left Fingertips” and you will see some photos that I have aligned left and right and would love to be able to put text beside them. How is this possible?

Sorry to bug you with such a simple question, but its very hard for me.

Thanks.

Bryce

Hmm.. I’d use a definition list. For a really quick, untested example…

HTML Sample

<dl>
    <dt class="left"><img src="image.jpg" alt="my image" /></dt>
    <dd>Some info about the picture goes here.</dd>

    <dt><img src="image.jpg" alt="my image" /></dt>
    <dd>Some info about the picture goes here.</dd>

    <dt class="left"><img src="image.jpg" alt="my image" /></dt>
    <dd>Some info about the picture goes here.</dd>                                    
</dl>

CSS

dt.left {
 float: left;
 clear: both;
}

dt{
 float: right;
 clear: both;

}

dd {
 float: left;
 line-height: 170px;
}

Renders something like:

You’d also need to clear that definition list as well.

Neato! I wish I had neat programs like that

Thank you so much!! This was much more help than I thought I’d get.

I am going to try this out right away. Just need to change the baby first lol

Hello Jeffrey,

Thank you so much for your fast immediate help. What you explained to me worked fantastic.

I hate to ask, but I was curious how I could maybe move the text a little bit away from the image when the image is aligned to the left?

Again, THANK YOU !

Bryce

Oh geez, I hate to ask one more question…

I typed in a good paragraphs worth of information and when I viewed the photo, the text was all messed up and under the photo rather than beside it.

Is there anyway to make it so I could write a paragraph rather than a short sentence?

Thank you! I hope not to abuse the help. Thanks!!