CSS Tip: Positioning photos with floats

October 01st, 2007 | Category: CSS,Heidi's Entries,How-to,Recommendations,Tips and Tricks,images
written by: Heidi Cool

bluepavilion.jpg
Night shot of one of three recently dedicated light pavilions on Superior Avenue.

In the past I've discussed how the use of photos can enhance a Web site, but I've not discussed the code one uses to incorporate them. On campus, and elsewhere, Web designers use a variety of techniques to include their photos. Some will build complex tables to get their photos positioned just right while others will add something like hspace="5" vspace="5" align="right" into the img tag.

Neither of these is recommended by current standards (the latter is deprecated as of HTML 4.1 but is necessary in HTML e-mail) nor do these techniques give you the control you need. A better way to do this is with Cascading Style Sheets (CSS).

Create a CSS class to float your photos to the right or left of your text

An easy way to include photos is to use the CSS property "float" to float the image to the right or left of the content that follows. One can float either the image itself or a container, such as a paragraph enclosing the image. I prefer to do the latter in case I wish to include a caption with the image.

One begins by opening the page's existing stylesheet and defining a new class to contain the image. On this blog I typically use a class I call "photoright." The code in the stylesheet looks something like:

.photoright {float: right; padding:2px 0px 8px 10px; margin: 0; font-size:90%; color: #7F8E29; font-style:italic; width: 200px;}

blades.jpg
Close-up of different pavilion in daylight.
This picture uses a class without the
width defined. I can add line breaks
(with varying results) or let some of the comment
push past the edge. Note how this moves the photo in.

  • .photoright is the name of the class. Usually class names don't include things like location and color (in case one wants to change those attributes in the future) but I typically include a .photoright and a .photoleft in all of my stylesheets just to offer some flexibility, and in this case the literal naming convention seems practical.
  • float: right; indicates that the paragraph (or other entity such as a div) will float to the right of whatever content follows.
  • padding:2px 0px 8px 10px; sets the padding for the paragraph. Padding is listed in clockwise order from top to the left, thus this class would have 2 pixels of padding on top, 0 to the right, 8 below and 10 to the left. Given the existing line-height of my regular paragraphs the 2 pixels on top allow me to line up the top of my photo with the top of uppercase letters in the main text. 0 on the right lets me float the picture as far to the right as the text will allow, 8 on the bottom gives me some space for text that wraps below the photo and the 10 to the left gives me some space between the photo and the text.
  • margin: 0; specifies that I have 0 pixels of margin on all sides. I'm using padding to set my spacing rather than margins so that my captions will begin at the same left edge as my photos and because Internet Explorer may interpret margins differently than other browsers.
  • font-size:90% indicates that my caption text should be 90% the size of my normal text. Some users may prefer .9em. (I'll leave the merits of various font-sizing methods for a later discussion.)
  • color: #7F8E29; indicates that the caption should be lime. In the Case stylesheets this would typically be the same color that one would use for h3's. Because the text is small I've made this slightly darker than the usual lime color.
  • font-style:italic; specifies that the caption will be italic.
  • width: 200px; is an optional measurement specifying the width of the floated content. This number should match the width of your image and will insure that long captions wrap, rather than extend past the picture. If you plan to always use the same size image, I would recommend setting this width. If you use different sized images, you could establish separate css classes for each image size. Some users may prefer to simply keep their captions shorter than the width of their images or to use <br />'s to break the caption to fit. Note: manual line breaks will look fine on your own computer, but not necessarily on everyone else's. Users who have adjusted the font size of their browser/user agent may still see captions jutting past the image, or line breaks that seem to occur in illogical places.
Apply the .photoright (or .photoleft) class to your page

Once the class has been added to your stylesheet you can begin to incorporate it into your pages. As the image will float to the right of any content that follows, you will want to start a paragraph, using the new style, immediately before the accompanying text. For example, in this blog entry I've put this at the very beginning of my entry:

<p class="photoright200"><img alt="Blue Pavilion" src="http://blog.case.edu/webdev/2007/10/01/bluepavilion.jpg" width="200" height="300" /><br />Night shot of one of three recently dedicated light pavilions on Superior Avenue.</p>

metalgrass.jpg
Close-up of first pavilion, floated left.

In this example I've used a class that defines a width of 200 pixels, the same width as the photograph. Note that I've included a line break immediately before the caption. This ensures that the caption starts below the image. Without a break (or a space), some browsers might ignore the width and have the caption begin to the right of the image. The other two pictures are placed farther down in the copy, again preceding the adjacent text. (View source to see exact placement.) The middle image uses a different class that doesn't define the width. I've left some of the caption hanging out so you can see how that works.

Using photoright and photoleft with Case templates

I've included the classes .photoleft and .photoright in the Case template files. These are in the current, and some past, versions. If you are using an older version that doesn't include the classes, simply copy them from the appropriate color stylesheet. Not knowing what size photos one might wish to include, the templates do not include the width measurement, but you may add it in based on the sample above.

That is pretty much all there is to it. If you have any questions, comments or other ideas, please submit them in the comments below.

Stumble This! Save to Delicious Share/BookmarkEmail This Post Email This Post

    Share on Google Buzz

26 Comments »
  1. Thanks! I have been fighting with photo placement for quite sometime. Now all I have to do is a little more CS research and I will be set :)

    Comment by ob81 — October 2, 2007 @2:25 am

  2. Whew!You're a genius man! I have learned something new again! Though, I still have to figure out on how to completely do it!

    Comment by Auto Parts Car Parts — October 3, 2007 @1:42 am

  3. This is very good info. I have used the "hspace="5" vspace="5" align="right" procedure for a long time to get MT to display images how I wanted them. I noticed the 'alt' in your code, is it not necessary to include 'title?'

    Comment by dave — October 3, 2007 @1:59 pm

  4. I'm glad you found it helpful. I always found hspace and vspace to be awkward because they put the space on both sides (or top and bottom) of the image, when you usually want the horizontal space to be only on one side or the other. We do however still use these for HTML e-mail as that doesn't fully support CSS positioning. Those unfamiliar with this can see a good example in this hspace tutorial wherein the pumpkins look awkwardly placed surrounded by the extra space. The 'title' attribute is optional and can be used to add additional information to a variety of tags, not just the img tag. The 'alt' attribute should always be used with images to provide alternative information to those using browsers that don't show images (such as Lynx) or for those listening to Web sites via screen readers. To learn more about this, I recommend reading 456 Berea Street's article, The alt and title attributes.

    Comment by Heidi Cool — October 3, 2007 @6:46 pm

  5. CSS is a powerful tool for web design, and search engines love it. My entire site was structured in CSS.

    Comment by HDR — October 4, 2007 @11:05 pm

  6. very nice tip , css add life to pages .

    Comment by Mohamed — October 9, 2007 @2:14 pm

  7. This is a really good tutorial. I was using a different method before, but this is definitely a lot easier. Great job on this one.

    Comment by JamesCalvin — October 16, 2007 @11:40 pm

  8. The CSS tip was neat. I am now able to more vibrancy to the webpages. Many thanks.

    Comment by Internet Marketing Singapore — October 18, 2007 @1:35 pm

  9. Thanks for that concise tutuorial - i've been learning css from scratch and aligning images has always been something i've struggled to get right...

    Comment by lime in the coconut — October 19, 2007 @9:10 am

  10. Thanks Heidi, this looks like it will be extremely helpful. I have one question though: Where the heck are those pavilions?

    Comment by gretchenaro — October 23, 2007 @9:01 am

  11. Gretchen, The pavilions are on Superior just west of East 20th. (Near the Plain Dealer bldg.)

    Comment by Heidi Cool — October 23, 2007 @1:08 pm

  12. Great tutorial! Will give it a try. Thanks!

    Comment by Graiker aus München — October 28, 2007 @7:30 am

  13. There are many blogs out there with great photos but so wrongly placed that you get the feeling that the post would be better off without the pictures.

    Comment by Travel, entertainment, dating and more — November 6, 2007 @2:54 am

  14. Hey, This was right on time. Thanks for posting. I used it on balancebodyliving.com/test on the home pages. I need to create a button, using an image, with instructions underneath it and I need it to clear the text. Working perfectly. I had spent hours trying to this with a div. Total waste of time. Thanks again. Keep posting!!!

    Comment by Zaiah-Adu — November 21, 2007 @7:49 pm

  15. My husband likes photography so much. He will surely like your post because this will really help him more understand about positioning of photos. Thanks for the great post.

    Comment by car parts nanny — December 11, 2007 @8:20 pm

  16. Thanks for the info. I started learning css so i can get content to be read first by the search engines. This has helped a lot.

    Comment by web info — December 20, 2007 @12:50 pm

  17. This is a good tip on the float attribute. I too have been playing around with this computer articles site that I have been designing. It took me a while to fully get my head around some of the coding but it is look good so far :)

    Comment by Sam Wilkinson — January 3, 2008 @6:27 pm

  18. My husband likes photography so much. He will surely like your post because this will really help him more understand about positioning of photos. Thanks for the great post.

    Comment by David — January 4, 2008 @4:10 pm

  19. Very helpful, thanks! A question: what if I want a border around my image? I've tried it a couple of different ways and end up with a border around the overall dimensions (including the padding). It seems like it should be simple, but I'm stumped!

    Comment by Amie — January 9, 2008 @7:03 pm

  20. Oops -- one typo was the source of the problem! Didn't affect IE but caused problems in Firefox. My borders are working again...thanks for post!

    Comment by Amie — January 9, 2008 @7:11 pm

  21. @ Amie, I know what you mean with IE and Firefox problems, I had the same issues. I was struggling with the colors of my border. It was different in several browsers when I wanted it to be the same. It was a small designer nightmare;). This should be known by every webmaster. Although it belongs to the basics of web design, it sure is nice to read it again. Thanks for pointing it out again. Vincent The World of Office Tips and Tricks.

    Comment by Vincent @ Office Tips and Tricks — January 13, 2008 @9:17 am

  22. Amie, I'm glad you got your border problem worked out. For those of you who don't know how to solve this problem, the easiest way is to create a new class in your style sheet that controls the border around images contained within the photoright class. So if you wanted a 1 pixel black border around such images you would add the following to your style sheet. .photoright img {border: 1px solid #000000; padding:0; margin:0;} This will put the border around the image only.

    Comment by Heidi Cool — January 15, 2008 @4:22 pm

  23. Thanks for the tutorial on inserting the float attributes into CSS. I had stopped using photos because I couldn't figure out how to get it right. Now, hopefully, I should be able to start including them again, for a better reader experience.

    Comment by Jonathan — January 17, 2008 @2:00 pm

  24. Thanks for the tutorial on inserting the float attributes into CSS. I had stopped using photos because I couldn't figure out how to get it right. Now, hopefully, I should be able to start including them again, for a better reader experience.

    Comment by Jonathan — January 17, 2008 @2:00 pm

  25. I've heard that latest version of Dreamweaver (CS3) is supposed to expedite CSS. Is that worth purchasing?

    Comment by Shawn Bishop — February 1, 2008 @2:42 pm

  26. That is quite a nice article about to position pictures between text. What you didn´t consider that u also might to use div´s for your pictures with seperate background or border which makes them look a bit nicer. I am not sure if it works with p tag aswell but canbe

    Comment by Web Consultant — June 20, 2008 @8:07 am

Leave a comment

RSS feed for comments on this post. | TrackBack URL