A HTML Quickie for the rest of us!

Ever seen websites that have images neatly inserted within the content? You know, where the text wraps around the image? This gives a professional look to things, doesn't it? Keep reading and I'll show you a common and very easy method on how this is done.

The trick to creating this visual effect is in the CSS used. Specifically, the float element. The CSS float element is used to align images [or any element of a document, including, but not limited to Adsense (hint!)] on left or right sides of text or other content items. This method will give your document a more natural flow, look and feel over the alternative table method.

Here's a code template that you may freely use for this purpose:

<div style="float:right;"><img src="location_of_image" alt="some descriptive text for the image" border="0" height="" width=""/></div>

Here's another code template that you may freely use that includes padding:

<div style="float:right; padding-left: 5px; padding-bottom: 5px;"><img src="location_of_image" alt="some descriptive text for the image" border="0" height="" width=""/></div>

The CSS padding elements above will create space on the left and bottom of the image. You can change the padding elements to create space on the right by changing the padding-left to padding-right. You can also add more or less space by changing the 5px (px stands for pixels) to a higher or lower value.

Simply, insert your image information into the image tag and adjust the style's float element to place the image on the left or right sides of your content [the float element only does left or right]. Use the src element for the location of the image. The src tag needs to be a relative or full URL to the image, but I recommend using the full URL. And be sure to modify the alt text [used for addition information (text tip), when someone puts their mouse over your image], height and width values before using this code template within an actual HTML document. Now, place the completed code template where you want the image to show within your document and check your page.

Feels good doesn't it?

*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*

Ray Gilman has been helping Webmasters with Web applications, tools, knowledge and advice over the past nine years and in His early days offered Web Awards to Webmasters for Great Achievements. For free PHP scripts and more information, please visit: http://www.webraydian.com.