the webmasters guide to the galaxy
tools and guides for webmasters and bloggers

How to Position Your Photos and Images Using CSS

How to Position Your Photos and Images Using CSSWith these techniques you will be able to position your photos and images anywhere you want on your website or blog with CSS. It doesn’t take much CSS to get your images displaying exactly how and where you want them. Don’t be afraid to experiment with the CSS code! Lets start with the quickest way to position your images using CSS:

Position images to the left or right with inline CSS

This is a great way to quickly position your images to the left or right of your text. The following example will position your images to the left.

Code:

<img src=”imageleft.gif” width=”" height=”" alt=”" style=”float: left” />

Result:

example image This is an example of how to position your images using CSS. You can use these tips on any website or blog. This is just example text so that we can see how the images will position using different techniques.

To position your images to the right, simply replace your CSS float value from left to the value right:

Code:

<img src=”imageright.gif” width=”" height=”" alt=”" style=”float: right” />

Result:

example image This is an example of how to position your images using CSS. You can use these tips on any website or blog. This is just example text so that we can see how the images will position using different techniques.

Position images to the left or right with external CSS

If you want to position images regularly to the left or right, you might want to consider adding classes to your external CSS file. This will allow you to add the class tag to every image you want to position without having to re-type your inline CSS. Add the following CSS class tags to your current CSS file:

External CSS:

img.imageleft { float: left }
img.imageright { float: right }

Now add the the class tags to your images:

Code:

<img src=”imageleft.gif” width=”" height=”" alt=”" class=”imageleft” />

Result:

example image This is an example of how to position your images using CSS. You can use these tips on any website or blog. This is just example text so that we can see how the images will position using different techniques.

You can also add margins to your CSS tags to add extra spacing around your images:

External CSS:

img.imageleft { float: left; margin: 15px; }
img.imageright { float: right; margin: 15px; }

Code:

<img src=”imageleft.gif” width=”" height=”" alt=”" class=”imageleft” />

Result:

example image This is an example of how to position your images using CSS. You can use these tips on any website or blog. This is just example text so that we can see how the images will position using different techniques.

Position images to the left or right with taglines

Sometimes you might want to add text under your images. This can be easily done with the use of a <div> tag.

External CSS:

.imageleft { float: left; margin: 15px; }
.imageright { float: right; margin: 15px; }

Code:

<div class=”imageleft”>
<img src=”imageleft.gif” width=”" height=”" alt=”" /><br />
Colorful Chester
</div>

Result:

example image
Colorful Chester

This is an example of how to position your images using CSS. You can use these tips on any website or blog. This is just example text so that we can see how the images will position using different techniques.

Position images to the center with external CSS

There is no float tag for centering an image, so you will have to use a <div> tag to position your images to the center:

External CSS:

.imagecenter { text-align: center; margin: 15px; }

Code:

<div class=”imagecenter”>
<img src=”imagecenter.gif” width=”" height=”" alt=”" />
</div>

Result:

example image

This is an example of how to position your images using CSS. You can use these tips on any website or blog. This is just example text so that we can see how the images will position using different techniques.

Special thanks to Cartoon Clipart for providing such colorful free cliparts!

If you liked this post, subscribe to my full RSS feed. Learn more about rss feeds with my quick guide. You can subscribe through e-mail too.

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Reddit
  • StumbleUpon
  • Technorati
  • co.mments
  • Bumpzee
  • Ma.gnolia
  • Spurl
  • PlugIM
  • YahooMyWeb

Comments (35)

  1. Jerad Kaliher on September 25th, 2007 at 8:58 am

    Up until now I’ve been using Word Press to do all the formatting for me. Whenever I run into a problem with html I usually recall code from back in 1998, when I actually learned it.

    Articles like these have helped me to develop my CSS skills. Thanks and keep them coming.

  2. Colin on September 25th, 2007 at 9:35 am

    Great article and very useful information. Although I use WordPress I have been doing most of my posts in an html editor but am now experimenting with Windows Live Writer, but this post is good reading :)

    Colin

  3. Paul Bradish on September 25th, 2007 at 9:37 am

    This is a very useful post! If there’s one thing that my blog needs - it’s better use of space. Currently, I have an image atop each blog entry and I’d like to start wrapping text around them.

  4. Madhur Kapoor on September 25th, 2007 at 9:38 am

    Nice tutorial Sarah , that will solve a lot of my problems . Its wonderful to see what cool things can be done by CSS . I am going to learn that now .

  5. YC on September 25th, 2007 at 1:36 pm

    This tutorial is an easier read than most others I tried to digest on the Net - thanks Sarah! I had so much trouble with CSS initially, still do, sometimes. :)

  6. Sarah on September 25th, 2007 at 1:58 pm

    Glad I could help some of you learn how to position your images. CSS will make it easier especially if you implement it into your current CSS file, so you can just reuse the code over and over.

  7. Dj Flush on September 25th, 2007 at 2:05 pm

    Nice set of CSS tips Sarah. To tell you the truth my experience says that the position of images matters more than the fact that you want to add images to your post or not.

    The position of the images is the main element of attraction to your readers and how well your pictures blend with your text.

    Great post :)

  8. Ryan Imel on September 25th, 2007 at 3:42 pm

    Good post. There’s one thing I would say to think about though. When naming classes (or ids) I find it good practice to avoid naming things according to their position, and instead name them by purpose. This makes it so that changing things later won’t effect the names of classes.

    For example, if i were to title a class “red” because I wanted to make it red, then later if I were to change it to blue then the class would be mismatched. It would be better for me to name it “alert” because that deals much more with the purpose, the structure even, than it does the style.

    In the case of images in posts, I might suggest using class titles like “major” and “minor”. I’ll think more on this, but I thought the idea was worth mentioning.

  9. Sarah on September 25th, 2007 at 4:38 pm

    @Dj Flush: I guess we should encourage, actually maybe force people to post photos. Hehehe, makes looking at text much easier and provides a break for the eyes.

    @Ryan: I can’t tell you how many times I’ve done just that, its not even funny! Thanks for pointing it out because it is a great reminder.

  10. Monika @ The Writers Manifesto on September 25th, 2007 at 5:17 pm

    These are one set of cool descriptions Sarah,

    I admit that I style my pics in my WYSIWYG editor in WP. I had no idea that could be so easily done with CSS.Oh, well not easily if one is new to the whole thing but it certainly looks doable.

    Monika :-)

  11. Steven Snell on September 25th, 2007 at 7:42 pm

    I like the examples, it makes your point very clear.

  12. Reader Tips: 26 September 2007 on September 26th, 2007 at 4:51 am

    [...] How to: position images using CSS: Centering images using CSS was one big headache for me, and this post solved it(headache) better than caffeine. [...]

  13. Colocation Services on September 26th, 2007 at 8:42 am

    That’s a great tutorial. Thanks for that. If I can ask what was Ryan’s point about major and minor? How would that fit here. Didn’t get that point very clearly. Sorry if cross questioning. Just trying to understand the point. :)

  14. david on September 27th, 2007 at 1:13 pm

    I have a question, What if you want to put a picture on the sidebar? Do i use the widget and type in the javascript? Or do I have to edit it from the sidebar.php? If I have to edit it through sidebar.php, I want to put it at the end of the sidebar after everything. How do I do that?

  15. Sarah on September 27th, 2007 at 3:01 pm

    @Colocation Servies: I think he means to use more general terms intead of naming your classes on what the class is actually doing, so that in the future if you change your mind on what that class should do you can do that without affecting the class name.

    @david: You can either edit your widgets in WordPress and add a Text widget, or you’ll have to edit the sidebar.php. You can position images in your sidebar too, but you’ll have to edit your sidebar.php to do that.

  16. Terry Didcott on September 29th, 2007 at 2:59 am

    Hi Sarah, that was a really interesting post. I use CSS quite a lot but still make plenty of stupid mistakes! I’d forgotten about using it for image positioning in blogs, tending to use the older align=”left/middle/right” in the img tags with hspace=”xx” to put a space around it. Now that you’ve reminded me, I’ll go back to setting the style sheet for images!
    - Terry ;-)

  17. Brown Batch #25: Link Love Fiesta » Brown Thoughts on September 30th, 2007 at 9:02 am

    [...] - How To Position Your Photos And Images Using CSS With these techniques you will be able to position your photos and images anywhere you want on your [...]

  18. Links for 30-09-2007 on September 30th, 2007 at 12:18 pm

    [...] BlueJar tells us how to position images using CSS [...]

  19. Technology Talk - 09/30/2007 on September 30th, 2007 at 1:36 pm

    [...] at BlueJar has posted a great guide explaining how to position your photos or images using CSS.  Positioning of photos can be a great way to improve the appearance of your [...]

  20. Web Design and Seo on October 1st, 2007 at 10:34 am

    Not new for me, but I liked the way you have presented it in your post.
    Great work!
    ATB

  21. Shivaranjan on October 1st, 2007 at 10:58 am

    That’s a cool tutorial. I am not very good at HTML and CSS. So I guess my next theme mod would be easier. :)

  22. [...] from Bluejar.com gives a nuts and bolts CSS image positioning tutorial. Sarah’s blog is a good read, she recently ran a very good “How To” [...]

  23. Sturat on October 3rd, 2007 at 2:53 am

    These are very useful tips to be a successful CSS developer and specially managing photos.

  24. Ryan Imel » Blog Archive » Styling Images with CSS on October 14th, 2007 at 6:59 pm

    [...] post was initiated, in part, by Sarah over at BlueJar with her post How to Position Your Photos and Images Using CSS. I’m kind of a semantics dork, so this topic caught my attention. Overall, I look forward to [...]

  25. Ryan Imel on October 14th, 2007 at 7:00 pm

    I finally put together my thoughts a bit more succinctly in the post linked above on my name. I appreciate your thoughts!

  26. PageRank Guide on November 24th, 2007 at 5:42 am

    This is a very informative post. This will help me so much when I am alligning images. Thanks!

  27. Björn on November 25th, 2007 at 11:35 am

    Thanks for an excellent presentation!

    Björn

  28. Ryan Imel » Styling Images with CSS on December 7th, 2007 at 2:38 am

    [...] post was initiated, in part, by Sarah over at BlueJar with her post How to Position Your Photos and Images Using CSS. I’m kind of a semantics dork, so this topic caught my attention. Overall, I look forward to [...]

  29. rajana on February 11th, 2008 at 4:27 am

    I need html code to stretch the image vertically in a table when image is used as a background in one td and in other td there is multi line content.The image should be stretched if there is very much text.

  30. diet on February 23rd, 2008 at 5:21 pm

    Not new for me, but I liked the way you have presented it in your post.
    Great work!
    ATB

  31. Jazztrio Jazz Supply on March 23rd, 2008 at 4:02 pm

    Thanks, great explanation. I am trying to figure out positioning in CSS and this is a lot of help.

    Jens

  32. global warming videos on April 8th, 2008 at 9:32 am

    Thanks. Nice code.

    Colorful Chester

  33. Ed on April 12th, 2008 at 10:55 pm

    You’ve laid it out in a very simple and easy to understand manner - helped me out a lot with my efforts in trying to use graphics! Thanks!

  34. Eye Wrinkle Cream on May 20th, 2008 at 11:04 pm

    For those of you still trying to get used to CSS, the above is bookmark worthy. There are some other attributes you can use to position photos, some of the ones that come to mind are top, left, bottom, etc. The float is useful when you want to align text with photos.

  35. Hostmonster on June 24th, 2008 at 7:22 pm

    CSS is always confusing for me. Thanks for this, its just what i needed.

Post a Comment