Tip: How to display images side by side

If you want to display images side by side, you will have to use table to do the layout. For example, to display the 2 logo below side by side



To display the above 2 photos, it must firs be hosted on the web. This can be done by Blogger (refer to Getting New Blogger to host your images for the profile, sidebar, header, etc. or host it with a third party host like Photobucket. Then you must get the URL ready.

Next, you must find out the width of your main column. To do this, you must get into the template editor and look for this block of codes:

#main-wrapper {
width: 400px;
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

This tells me that the width is 400 pixels and I must make the width so that together they will fit in the column. In this case, I have chosen to make the width of the 2 images 180 pixel wide each. I have two choices of doing it. Resize the image to the proper width first with a photo editor like Irfanview, then upload it to the web, or leave the size as it is, then add a width="180" attibute to the image tag, like this: <img src="image URL" width="180" />. The height will automatically be resized to keep the aspect constant and so can be left out.

To display the image above, I put them into a HTML for a 2 column table, with the <img> as the contents. I show an example below

<table>
<tr>
<td><img src="photo1 URL" width="180" /></td>
<td><img src="photo2 URL width="180" /></td>
</tr>
</table>

replacing photo1 URL and photo2 with the actual URLs of the logo. Also, I have shown the HTML for the table in different lines to make it easily understandable. If you actually write the table this way, what is going to happen is there will be a large empty space above the table. You would have to write the HTML for the table in one continuous line without pressing the ENTER key.

Actually, the 2 logo above have been made into hyperlinks. Click on it and see what happen. It will take too long to explain it, but if any of you are interested, comment in the post and I will make the effort to explain it, perhaps in another post.

Books from Amazon

Photo blogging: SplashPhoto and SplashBlog help consumers share images on the Web.(services of SplashData Inc.) : An article from: Digital Imaging Digest [HTML] (Digital)

Videoblogging For Dummies

Buzz Marketing with Blogs For Dummies (For Dummies (Business & Personal Finance))

NEWER POST

OLDER POST