552 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 100+ members
  • Located in Canada
  • Has collected 100+ items on Envato Market
+1 more
OurWebMedia says

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

2529 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 10+ members
  • Has sold $40,000+ on Envato Market
  • Interviewed on an Envato blog
+11 more
JeffreyWay says

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;
}
2529 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 10+ members
  • Has sold $40,000+ on Envato Market
  • Interviewed on an Envato blog
+11 more
JeffreyWay says

Renders something like:

Sample

2529 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 10+ members
  • Has sold $40,000+ on Envato Market
  • Interviewed on an Envato blog
+11 more
JeffreyWay says

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

552 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 100+ members
  • Located in Canada
  • Has collected 100+ items on Envato Market
+1 more
OurWebMedia says

Neato! I wish I had neat programs like that :P

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

552 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 100+ members
  • Located in Canada
  • Has collected 100+ items on Envato Market
+1 more
OurWebMedia says

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

552 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 100+ members
  • Located in Canada
  • Has collected 100+ items on Envato Market
+1 more
OurWebMedia says

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

by
by
by
by
by
by