Feature
Post

Category
Design, General


Aligning Images The Right Way Using CSS

This here’s a demo imageImages are great for blog posts and chunks of text in general. Even if they’re just remotely relevant, they’ll add some space and make the content more accessible. You want to spice your texts up with images.

You can position images however you like, of course, but a nice feature is to have the floating to the left or right, with the text flowing around them.

Like the one on the right here, using the following code:

<img src="TheImageLocation.jpg" alt="My Image Description" align="right" vspace="15" hspace="15" />

Nice huh?

Well, it could be better. You see, using the align="right" floats the image to the right, but the vspace and hspace values are around the full image, which looks a little weird with the right side of the image not being in line with the content’s right side.

Like so:

Look!

What you should do is use CSS to float your images instead. Add these classes to your stylesheet:

.align-right { float:right; margin: 0 0 15px 15px; }
.align-left { float:left; margin: 0 15px 15px 0; }

The margin will make sure that there’s no space where it isn’t needed, in other words, you won’t get that nasty spacing problem like the one in the image above.

Use it like this:

<img src="TheImageLocation.jpg" alt="My Image Description" class="align-right" />

While we’re at it, why not add this to the stylesheet as well:

.frame { padding: 5px; border: 1px solid #aaa; }

Now you can add the frame class to your images for a nice looking border around your images. So if we want to float an image to the right with a border, we’ll do it like this:

<img src="TheImageLocation.jpg" alt="My Image Description" class="align-right frame" />

This here’s a demo imageTake a look to the right. There you have it, floating correctly and all, looking a lot better than the first one, right?

You know what the best part with this is? If you’re a WordPress users, this is version 2.5 compliant code. They’ve finally switched to using CSS for aligning images, about time I’d say.

There you have it, easy handling of images, looking a little better, and being a lot more flexible should you want to change spacings, border colors and such.


  1. By Nick Palacios posted on March 6, 2008 at 11:24 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I would get a little more specific when you are applying the frame
    img.frame { styling }

  2. By dan posted on March 6, 2008 at 7:46 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Good little article outlining better use for CSS for beginners.

    Not only can this method of approach be used for images, but all areas of html/css. Play around, get a feel for what limitation you may or may not have.

  3. By TDH posted on March 7, 2008 at 3:57 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Nick, you’re right, however I like to be able to apply classes across the board when they’re as general as these, and as Dan notes you can add these element anywhere.

  4. By Sumesh posted on March 7, 2008 at 8:55 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I use this method already, albeit with id’s rather than classnames. Just lets me reduce a few letters (typing out class is larger)

  5. By Nick Palacios posted on March 10, 2008 at 4:26 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    TDH – I was just arguing for the sake of arguing hehe (Good general CSS article).

    Sumesh – I don’t necessarily agree with using IDs in place of classes for general styling to save space. The W3C defines an ID as “a unique identifier to an element”.

  6. By Jermayn Parker posted on March 12, 2008 at 12:23 am
    Want an avatar? Get a gravatar! • You can link to this comment

    ^^ especially if you decide to use more than one image on the page and then IDs are all wrong. Class is an extra 3 letters and so I would say it is NOT worth the possible problems.

    btw great article..

  7. By Indranil Banerjie posted on March 15, 2008 at 12:31 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    You sir are a genius.
    With exquisite simplicity you have solved a problem which many have obfuscated. Thanks very much.

  8. By Aaron Mc Adam posted on March 20, 2008 at 9:58 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    What about centring images! the text-align property is a bit weird when used with images surely..

  9. By Aaron Mc Adam posted on March 20, 2008 at 10:05 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    oh god.. just figured it out forget it lol

  10. By Pai posted on April 2, 2008 at 10:11 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Nick, agree with you. use ID to identify an element, and use class to apply styling to an element, it makes more sense..

    anyway, when using this technique, dont forget to mention about “clearing” the float(s). 1 entry could have left, right or centered align images, so..EasyClearing come to the rescue! :D

  11. By Rob hall posted on April 16, 2008 at 9:51 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Hi, i have some images with links in my blog, i put the codes to add every image, but by default all of them are aligned up to down and i would like to align them one and other to the right or left side. can you help me please?
    http://img181.imageshack.us/img181/250/imag11tf5.png

  12. By Lex posted on July 17, 2008 at 2:00 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I personally try to avoid presentation descriptive class names such as ‘align-right’ or ‘align-left’. The purpose of using CSS is maintain content and presentation in diferent layers, separated. And if you have to redesign, maybe those class names become useless.

  13. By Robin posted on September 13, 2008 at 12:03 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    This is a great one. I been looking for this. :) and got into here via Google :) .

    Thanks You !

  14. By Yisel posted on February 5, 2009 at 3:09 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    This is a great fix.

    You can also change the vertical and horizontal space under the Advanced Settings tab when you click on the Edit Image icon. The drawback is that you would have to do for every image.

  15. By Lindsay posted on February 21, 2009 at 5:50 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks for this blog! I was having lots of problems using CSS to align my images.

  16. By Daniel K posted on March 13, 2009 at 8:23 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Hey,

    I found out the hard way: float and align are definitely not the same.

    This is especially so when using the clear attribute on page layouts. If you clear a floated image (useful, say, in a post) then it will clear all elements on the page layout.

    I don’t think there is an alternative to align…

  17. By Khadija posted on April 15, 2009 at 7:13 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Very nice article. Was stuck in a similar scenario…
    Thanks

  18. By Enrique Ramírez posted on August 29, 2009 at 10:39 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Don’t take this the wrong way, but I was totally expecting more of this.

    You could expand this article by mentioning the differences of aligning an inline image and a block image. How to trigger each behaviour and how to align each of them is way different. For example, text-align works for inline, while margin works for blocks. Vertical align can be used to position an inline image (i.e., an icon besides a link) with the text, etc.

    Props for encourage the use of CSS for styling, though! Just think there’s room for so much more.

  19. By Darren posted on August 29, 2009 at 11:07 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    @Daniel K – The image will only clear other floated elements in your page layout.

  20. By thespider posted on August 29, 2009 at 11:28 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    thanks, now show me how to put the image in the center and middle of another div.

  21. By ◄IVAN► posted on August 30, 2009 at 4:01 am
    Want an avatar? Get a gravatar! • You can link to this comment

    very simple & useful :)

  22. By Stephen posted on November 4, 2009 at 1:34 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Thank you very much for this wonderful tip! *joy* I had been very dissatisfying with the usage of align=”right” on my blog, it just didn’t appear the way I wanted. For some reasons, I Googled again today and found you. Thanks a million!

  23. TrackbackCentering images with CSS | DevloungeAligning Images The Right Way Using CSS | DevloungeAligning Images The Right Way Using CSS | Devlounge « Netcrema – creme de la social news via digg + delicious + stumpleupon + redditphotoshop actions | WebDesignExpert.MeTwitted by spiffyMy Weekly Diigo Bookmarks (weekly) | My Squirrelly View of EducationBest September 2009 | SOSFactory