With 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:
Result:
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:
Result:
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.imageright { float: right }
Now add the the class tags to your images:
Code:
Result:
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.imageright { float: right; margin: 15px; }
Code:
Result:
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:
.imageright { float: right; margin: 15px; }
Code:
<img src=”imageleft.gif” width=”" height=”" alt=”" /><br />
Colorful Chester
</div>
Result:
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:
Code:
<img src=”imagecenter.gif” width=”" height=”" alt=”" />
</div>
Result:
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.
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.
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
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.
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 .
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.
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.
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
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.
@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.
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
I like the examples, it makes your point very clear.
[...] 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. [...]
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.
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?
@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.
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
[...] - 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 [...]
[...] BlueJar tells us how to position images using CSS [...]
[...] 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 [...]
Not new for me, but I liked the way you have presented it in your post.
Great work!
ATB
That’s a cool tutorial. I am not very good at HTML and CSS. So I guess my next theme mod would be easier.
[...] 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” [...]
These are very useful tips to be a successful CSS developer and specially managing photos.
[...] 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 [...]
I finally put together my thoughts a bit more succinctly in the post linked above on my name. I appreciate your thoughts!
This is a very informative post. This will help me so much when I am alligning images. Thanks!
Thanks for an excellent presentation!
Björn
[...] 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 [...]
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.
Not new for me, but I liked the way you have presented it in your post.
Great work!
ATB
Thanks, great explanation. I am trying to figure out positioning in CSS and this is a lot of help.
Jens
Thanks. Nice code.
Colorful Chester
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!
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.
CSS is always confusing for me. Thanks for this, its just what i needed.