3.19.2008

How to Make Your Photos "Float"

You know how you want to pull in an image, from say, your Flickr account, and you can't get it to align properly and pretty along with your text? Well, here's the code that you can use:

<div style="float: right; margin-left: 0.5em; width: 125px; height: 125px;">PLACE THE HTML FOR YOUR IMAGE HERE</div>

What does it do? Well, it adds code that will enable your image to "float" at the right side (in my case) or left side of your text. To see what your image will look like, delete the text where I have "PLACE THE HTML FOR YOUR IMAGE HERE" and paste in the HTML for YOUR image.


  • See where it says "float: right;"? Well, if you want it to float on the left, change it to "left".

  • The "margin-left:" number tells how much of a "gap" between the text and the image you want to have. Play around with the number and you'll see.

  • The "width" and "height" numbers, in my experience, should be a little bigger than the dimensions of your image. This will usually be a part of the HTML code for your image.


Try it and see if it works. I got it to show up successfully on my last post...hopefully it will work for you, too!

3 comments:

Hey Harriet said...

I had no idea how to do this, so THANKYOU so very much for sharing this handy info! You rock!!!

Caroline said...

You can also add:

align="right" or align="left"

to your image HTML. So:

< img src="yourimage.jpg" align="right" >

That would also float the image right. And to add padding:

< img src="yourimage.jpg" align="right" style="margin-left: 10px; margin-bottom: 10px; margin-top: 10px; margin-right: 10px;" >

So you can do it all in one line! :)

Sarah McBride said...

thanks for sharing this info! awesome to know.
I love bigstock photo too.