How to Float an Image Using the Span Style
- 1). Open an HTML document using Notepad or your HTML editor.
- 2). Paste this code into your document's body section:
<img src="testImage.png" />
<span>
test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test
test
</span>
This code creates an image -- using an img tag -- and a span. The span contains text that will wrap around the image. Note that the img image references a CSS class named "floatLeft." Replace "testImage.png" with the URL of an image on the Web or the path name of an image on your hard drive. For instance, if an image named "park.gif" is in a folder named "Images" on your "C" drive, create the img tag as follows:
<img src="C:\Images\park.gif" /> - 3). Paste the following CSS class definitions in your document's head section:
<style type="text/css">
.floatImageLeft {
float:left;
margin-left:10px;
margin-right:20px;
}
.floatImageRight {
float:Right;
margin-left:10px;
margin-right:20px;
}
</style>
The floatImageLeft class, referenced by the image, contains a float attribute. This attribute's value is "left." This value tells browsers to float objects to the left side of a Web page. The "floatImageRight" class floats objects to the right side of a page. - 4). Save the document and open it using a browser. The floatLeft class causes the image to float to the left side of the Web page; the text wraps around the image's right side.
- 5). Return to the HTML document's body section and change the code "floatImageLeft" to "floatImageRight" in the img tag. Save the document, then return to your browser.
- 6). Press "F5" to reload the browser. The image shifts to the right side of the Web page and the text wraps around the image's left side.
Source...