Picture Placement and Alignment, MySpace or Blogger

Alignment of Pictures and Text using html

Strategies for aligning images, or images/text combinations

1) Use of align property
2) Use of table cells (I actually like this, many don't)
3) float (I combine this with text-align)
4) Use of inner divs in an outer div, and absolute placement.


I use these strategies in Blogger, MySpace, general Web Design.

Method 1: align property
This is one of the most common methods used, if one wants text to the right, or left, of the image, which wraps around the bottom of the image if needed.

text to the right of our image. If there is enough it will wrap to the bottom of the image.

<div style="height:auto; width:150px; 
border:2px pink solid">
<img src="http://i17.tinypic.com/6b05ehc.jpg" align="left">text to the right of our image.  If there is enough it will wrap to the bottom of the image.</div>

text to the left of our image. If there is enough it will wrap to the bottom of the image.

<div style="height:auto; width:150px; border:2px pink solid">
<img src="http://i17.tinypic.com/6b05ehc.jpg" 
align="right">text to the left of our image.  If there is enough it will wrap to the bottom of the image.</div>

Text under image goes here. This text will stretch the length of the defined space, centered under a centered image.

<div style="height:auto; width:150px; border:2px pink solid; text-align:center">
<img src="http://i17.tinypic.com/6b05ehc.jpg" style="text-align:center"><br>
Text under image goes here.  This text will stretch the length of the defined space, centered under a centered image.
</div>

Text above image goes here. This text will stretch the length of the defined space, centered under a centered image.

<div style="height:auto; width:150px; border:2px pink solid; text-align:center">
Text above image goes here.  This text will stretch the length of the defined space, centered under a centered image.<br>
<img src="http://i17.tinypic.com/6b05ehc.jpg" style="text-align:center"></div>

If I want to put two pictures, side by side, with text centered above each one,
and control my spacing, I can create TWO of the above div blocks, and float them next to each other.
I use borders to show the boundaries of the divs. The borders can be omitted.

text here blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

text here blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

<div style="height:auto; width:150px; border:2px pink solid; text-align:center; float:left;">
text here blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
<br>
<img src="http://i17.tinypic.com/6b05ehc.jpg" style="text-align:center">
</div>

<div style="height:auto; width:150px; border:2px pink solid; text-align:center; float:left;">
text here blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
<br>
<img src="http://i17.tinypic.com/6b05ehc.jpg" style="text-align:center">
</div>

If I want more space between the two divs,
I can add a margin.

text here blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

text here blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

<div style="margin-right:30px; height:auto; width:150px; border:2px pink solid; text-align:center; float:left;">
text here blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
<br>
<img src="http://i17.tinypic.com/6b05ehc.jpg" style="text-align:center">
</div>

<div style="height:auto; width:150px; border:2px pink solid; text-align:center; float:left;">
text here blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
<br>
<img src="http://i17.tinypic.com/6b05ehc.jpg" style="text-align:center">
</div>

Method 2: Use of Table Rows and Cells.
This is the method I most often use. It is easy to code, and works well cross browser. With tables and cells I can easily control exactly where the content falls. But it is not good for "wrapping" the text around the image. For that align works better.

I open a table.
If I want stuff aligned horizontally, I put it in the same row.
If I want stuff aligned vertically, I put it in the same column.

i.e.
Suppose I want two pictures, with text in between them, all in one row.
I use the following:
<table>
<tr>
<td><img src="PIC-URL"></td><td>TEXT </td><td><img src="PIC-URL"></td>
</tr>
</table>

TEXT

Suppose I want two pictures, one above the other, with text next to each picture:
<table>
<tr>
<td><img src="PIC-URL"></td><td>TEXT</td><td>
</tr>
<tr>
<td><img src="PIC-URL"></td><td>TEXT</td><td>
</tr>
</table>


[IF using Blogger You want to remove all the carriage returns between the html tags. I wait until I am done with the code before doing this. It is easier to edit with the carriage returns in it, because I can see each row. ]

Method 3:Use of Float



Method 4: Use of a Div and placement within the div
This method has the BEST accuracy for placing stuff, so it has the same spacing and placement across different browsers, resolutions and dpi settings.
This method takes more effort to code.
You need to know the sizes of stuff.

1) Create the outer div. This will act as the container for the images and any text which goes with them. You will need a position statement for this div, even if you are not going to move it anywhere.
<div style="position:relative; top:0px; width:106px; height:106px">
<img src="PIC-URL" style="position:absolute; top:2px; left:2px">
<img src="PIC-URL" style="position:absolute; top:2px; left:54px">
<img src="PIC-URL" style="position:absolute; top:54px; left:2px">
<img src="PIC-URL" style="position:absolute; top:54px; left:54px">
</div>

Below is an example using a 50x50 jpg img file, I stored on tinypic:
<div style="position:relative; top:0px; width:200px; height:106px; border:1px silver solid;">
<img src="http://i17.tinypic.com/6b05ehc.jpg" style="position:absolute; top:1px; left:2px; height:50px; width:50px;border:1px pink

solid">
<span style="position:absolute; top:1px; left:55px; width:145px; height:50px;">
TEXT NEXT TO TOP PICTURE</span>
<img src="http://i17.tinypic.com/6b05ehc.jpg" style="position:absolute; top:51px; left:2px; height:50px; width:50px;border:1px pink solid">
<span style="position:absolute; top:51px; left:55px; width:145px; height:50px;">
TEXT NEXT TO BOTTOM PICTURE</span>
</div>
The result of the above is this:
(I am pasting the actual code in the blog post, instead of a screen shot).

TEXT NEXT TO TOP PICTURE


TEXT NEXT TO BOTTOM PICTURE

Have image enlarge as mouse hovers over it. (This was asked in a discussion forum, and after I posted the answer there, I was looking for a place to add it to my blog, and this article seemed like the best fit).

<a class="myHover" href="http://i11.tinypic.com/5ylv12h.jpg">
<img class="myhovImg" src="http://i11.tinypic.com/5ylv12h.jpg"></a>
<style>
a.myHover:hover img {filter:none;}
a.myHover:hover img {width:50px; height:50px;}
</style>

Have a Nice Day; Thank you for Visiting :-)

codes ? Is not code plural already? Prior to myspace I had never seen the word code pluralized to codes, when discussing software source code (or is it source codes?). Put text next to image. Myspace code for putting text next to picture.
How to put an image on left side of text.
How do I get writing with Picture on the side of writing
align picture on left side and text on the right side for myspace
different image on mouse over on myspace
myspace picture captions
myspace hover effects
myspace hover codes
place image to side of text on myspace
images side by side
image with text next to it