playing, by Denise

Friday, December 18, 2009

Photo placement left & right

This is an example of a blog post where a photo floats to the left of the blog entry and the text is started to the right of the photo, wrapping below the photo if more room is needed.

Sometimes you want a photo to stand alone, but sometimes there is a desire to have words wrap the photo. This technique is implemented by defining a CSS element that specifies that images are to be floated to the right or to the left. The CSS element is then referenced in the blog entry.

I have defined two CSS elements in this blog, one to float the image to the left, and one to float the image to the right. They are:
#floatRight img {
float: right;
margin: 0 10px 3px 10px; /* top right bottom left */
}

#floatLeft img {
float: left;
margin: 0 10px 3px 10px; /* top right bottom left */
}
In order to create a blog entry with a photo floating to the left, I would start the blog entry with a div referring to the floatLeft entry.

The text of this blog entry, including the reference to the div, can be found on the page http://sites.google.com/site/denisegoldbergplays/Home, in the file titled wrapPhotoWithText.txt.

No comments:

Post a Comment