Thursday, April 3, 2008

Use CSS Style "Float" to Align Images, Not "Text-align"

They say a picture is worth a thousand words. This holds true in every sphere of life and a website is no exception to that. Graphics on a webpage grab the visitors' attention quickly and hook them onto your website. So always use interesting images on your website that describe your point of view thus enhancing the effect of your text.

But one common problem, most of the website owners who don't have sound knowledge in web design face, is the proper alignment of text and images. We mostly tend to align text and images with the "text-align" property. But as the name suggests, using this property, only text can be aligned. This property is no good to adjust the position of chunk elements like images, tables etc. Though some modern advanced browsers can coordinate images using "text-align" property, but at the same time many can't.

So to make images on a webpage fully compatible to every browsers, you should use the style property "float" to align your images. This property specifies the position of the floated element and other elements around it. A sample of code where the image will be aligned left and the text to the right of it will be:

<p>
<img src="example.jpg" alt="Your Alt Text" style="float:left;" />
Your Paragraph Text
</p>
This can easily be done using any website editing tool.

No comments: