CASE.EDU:    HOME | DIRECTORIES | SEARCH

The Web Development Blog has moved to http://www.heidicool.com/blog/. Please visit me there to read the latest entries and to update your bookmarks and RSS feeds.

October 01, 2007

CSS Tip: Positioning photos with floats

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.

StumbleUpon Toolbar Stumble It! AddThis Social Bookmark Button


Posted by: Heidi Cool October 1, 2007 03:10 PM | Category: CSS , Heidi's Entries , How-to , Recommendations , Tips and Tricks , images

Trackbacks

Trackback URL for this entry is: CSS Tip: Positioning photos with floats

Comments

gravatar

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 :)

Posted by ob81 on October 2, 2007 02:25 AM

gravatar

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!

Posted by Auto Parts Car Parts on October 3, 2007 01:42 AM

gravatar

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?'

Posted by dave on October 3, 2007 01:59 PM

gravatar

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.

Posted by Heidi Cool on October 3, 2007 06:46 PM

gravatar

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

Posted by HDR on October 4, 2007 11:05 PM

gravatar

very nice tip , css add life to pages .

Posted by Mohamed on October 9, 2007 02:14 PM

gravatar

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.

Posted by JamesCalvin on October 16, 2007 11:40 PM

gravatar

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

Posted by Internet Marketing Singapore on October 18, 2007 01:35 PM

gravatar

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...

Posted by lime in the coconut on October 19, 2007 09:10 AM

gravatar

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

Posted by gretchenaro on October 23, 2007 09:01 AM

gravatar

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

Posted by Heidi Cool on October 23, 2007 01:08 PM

gravatar

Great tutorial! Will give it a try. Thanks!

Posted by Graiker aus München on October 28, 2007 07:30 AM

gravatar

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.

Posted by Travel, entertainment, dating and more on November 6, 2007 02:54 AM

gravatar

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!!!

Posted by Zaiah-Adu on November 21, 2007 07:49 PM

gravatar

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.

Posted by car parts nanny on December 11, 2007 08:20 PM

gravatar

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.

Posted by web info on December 20, 2007 12:50 PM

gravatar

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 :)

Posted by Sam Wilkinson on January 3, 2008 06:27 PM

gravatar

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.

Posted by David on January 4, 2008 04:10 PM

gravatar

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!

Posted by Amie on January 9, 2008 07:03 PM

gravatar

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!

Posted by Amie on January 9, 2008 07:11 PM

gravatar

@ 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.

Posted by Vincent @ Office Tips and Tricks on January 13, 2008 09:17 AM

gravatar

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.

Posted by Heidi Cool on January 15, 2008 04:22 PM

gravatar

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.

Posted by Jonathan on January 17, 2008 02:00 PM

gravatar

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.

Posted by Jonathan on January 17, 2008 02:00 PM

gravatar

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

Posted by Shawn Bishop on February 1, 2008 02:42 PM

gravatar

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

Posted by Web Consultant on June 20, 2008 08:07 AM

Post a comment

















Posted by: hac4 (Heidi Cool) October 1, 2007 03:10 PM | Comments (26) | Trackback