float property is used to wrap images around html elements such as images, as shown in this example.
In this tutorial we will create this effect.
First we will need to setup our basic html page structure. Once complete save your file as float.html.
Now we will need to enter a block of text in our body. Make sure the block of text is long enough so that there is enough text to wrap around the image you are inserting.
Next we will insert the image that will be used. You can use your own image, or use the one provided in the downloads folder corresponding to this lesson.
<img src="beach.jpg" alt="mywebsite.com" width="200" height="200">
Now to create the
float effect create your style sheet and insert the following style declaration.
margin: 0 0 10px 10px;
float: right;, means the image will appear on the right of the text. We could also use
float; left; if that was our intention. In that case the image would appear on the left side of the text.
We have also added a
margin so there is a space on the left and bottom side of the image.