Jump to content

Photos to the left of text in a paragraph


Recommended Posts

Can someone help with me the code to do a photo to the left and text to the right (but not just on the bottom line)?  I am looking to do roughly one image, not very big - maybe 120x120 with two to three lines of text so the text is to the right of the photo in a paragraph. ???
I am giving you the solution on the basis of the whatever I Understand. U can do that create a table and have 2 colums one is for the image and another is for the text u have to put and give the width of the image one is 25% and another column to 75%.  Try this out


pls can u send some snap kind of a thing or anything that can better explain ur problem.
[code]<html>
<body>
<table border=0>
<tr>
<td valign="middle">
<img src="yourimage.jpg"/>
</td>
<td align="left" valign="middle">
Your text goes in here
</td>
</tr>
</table>
</body>
</html>[/code]

You can easily adjust the 'align' to either Left, Right or Center and you can adjust 'valign' to Bottom, Middle, Top, etc.
[code]You shouldn't have to use tables at all for something like this. If you're wanting to use an image aligned to the left or right of text, I'd recommend using a good CSS solution with floats and clears. This works for me:
[b]CSS[/b]
[code]
img.left { float: left; }
img.right { float: right; }

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
[/code]

[b]HTML[/b]
[code]
<p class="clearfix"><img src="myImage.jpg" class="left" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam sit amet dui. Sed mattis, nisl non sagittis vulputate, libero nisl pretium nulla, iaculis ornare magna magna ac mi. Mauris et ipsum vel metus gravida feugiat. Donec rhoncus tellus nec leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nibh eros, placerat nec, euismod eget, convallis sollicitudin, magna. Pellentesque in nisl eget sem elementum placerat. Praesent in ipsum. Nam ut nisi. Aenean congue vestibulum risus. In ultrices. Duis nunc. Aenean augue nisl, accumsan eu, facilisis non, placerat eu, odio. Aliquam erat volutpat. Donec est ligula, fringilla congue, ultrices sed, viverra non, tellus. In varius semper tortor. Integer metus.</p>

<p class="clearfix"><img src="myImage2.jpg" class="right" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam sit amet dui. Sed mattis, nisl non sagittis vulputate, libero nisl pretium nulla, iaculis ornare magna magna ac mi. Mauris et ipsum vel metus gravida feugiat. Donec rhoncus tellus nec leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nibh eros, placerat nec, euismod eget, convallis sollicitudin, magna. Pellentesque in nisl eget sem elementum placerat. Praesent in ipsum. Nam ut nisi. Aenean congue vestibulum risus. In ultrices. Duis nunc. Aenean augue nisl, accumsan eu, facilisis non, placerat eu, odio. Aliquam erat volutpat. Donec est ligula, fringilla congue, ultrices sed, viverra non, tellus. In varius semper tortor. Integer metus.</p>
[/code]

Good luck.[/code]
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.