I have had requests from a lot of people who still hang on to their table-based layouts to help them align images on their pages. Somehow the table structure does weird things to image and text placement.

Using CSS properties to place images on a page is so easy that I can’t understand why those people still cling desperately to placing images in table data cells and hope they don’t break their layout.

First of all, I create a rule for the img Selector:

img
{border:0;}

If you are using banners or images as links on your pages, this will ensure that that ugly blue border doesn’t appear. The other bonus of this is that you don’t have to add border=”0″ to each <img /> tag on your page.

Next I create two “img classes” which will place the images either on the left or right side of the page.

img.left
{
float:left; /* the float property places image on left side */
margin:5px 30px; /* top and bottom margins are 5px, left and right 30px; */
margin-right:5px; /* overrules the right-margin declaration of 30px so there is less white space between the image and the text */
}

img.right
{
float:right; /* the float property places image on right side */
margin:5px 30px; /* top and bottom margins are 5px, left and right 30px; */
margin-left:5px; /* overrules the left-margin declaration of 30px so there is less white space between the image and the text */
}

This last class a “clearing class” which can be used if you want your text to not wrap around the image, but instead drops down under the image, back in the normal flow of the page.

.clear
{clear:both;}

So much easier than trying to fit images into table data cells.

The (X)HTML

<img class=”left” src=”someimage.gif” title=”description of your image” alt=”description of your image” />

No Comments »