Eagle-eyed readers may have noticed the look of the thumbnail in my last post; it has a light-gray border around it, surrounded by a bottom-right shadow.

This effect is created using CSS. Whenever I want this effect to apply to one of the images I publish, I simply use the following markup:

Here's an example:

Only problem I encounter so far is that I cannot break to the next line below the image easily, all the markup after the thumbnail div seems to flow next to the image, like the text you are reading now. As a dirty fix I could add <br/> tags, but this is obviously not the way to go. Any of you CSS experts know how to prevent this from happening?

Here's the CSS I'm using:

.thumbnail {
float:left;
background: url(../images/shadowAlpha.png) no-repeat bottom right !important;
background: url(../images/shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}

.thumbnail img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}

This technique is taken from an ALA article.

CREATE A NEW COMMENT

	Name:
	Email:
	Website:
	Content:	HTML is not allowed. Hyperlinks will automatically be converted.