Thursday, March 15, 2007

CSS Float

CSS Float

Floating is often used to push an image to one side or another, while having the text of a paragraph wrap around it. This type of usage is often referred to as text wrapping and resembles what you might see in many magazines that have articles which wrap around images of various shapes and sizes.
Float Image

Wrapping text around an image is easy when using the CSS Float attribute. You have a choice to either float the picture to the left or to the right and the rest is done for you. Below is an example of an image that is moved through all four corner's of a paragraph.
CSS Code:

img.floatLeft {
float: left;
margin: 4px;
}
img.floatRight {
float: right;
margin: 4px;
}

HTML Code:


<body> <img src="sunset.gif" class="floatLeft"> <p>The images
are contained with...</p> <img src="sunset.gif" class="floatRight">
<p>This second paragraph has an...</p> </body>

No comments: