Posting images with proper layout for Bloggers

For those who have problem in posting images with proper layout, here's a solution.

Req: HTML editing, CSS.

Soln:
CSS can handle images in a smart way. You can not only make ur image go left, right or in centre but also define amt of space between text and image(ie margin).

Here's the example of improper layout


See this image defaults to left side and all the text goes below it. This leaves a huge ugly whitespace.

Now to move this image on the right with text besides it use the following code:
We have to use <div> tag before <img> tag as shown:

Original <img> tag generated by Blogger:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/x/blogger2/4309/4591/1600/374409/images.jpg"><img style="cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/x/blogger2/4309/4591/200/661295/images.jpg" border="0" alt="" /></a>

Now just enclose this code with <div style='float:right;margin-left: 5px;'></div>
So modified code is:

<div style='float:right; margin-left:5px;'><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/x/blogger2/4309/4591/1600/374409/images.jpg"><img style="cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/x/blogger2/4309/4591/200/661295/images.jpg" border="0" alt="" /></a></div>

The result will be:

Now there the image goes to right and we have a margin of 5 px between image and this text. If you want ur image to be in left side then just change float:left and margin-right:5px

Tech Tags: image+layout CSS blogger