1
00:00:00,510 --> 00:00:07,860
The float property is used to wrap images around HDMI elements such as images as shown in this example

2
00:00:09,250 --> 00:00:16,190
in this tutorial will create this effect.

3
00:00:16,270 --> 00:00:27,090
First we need to setup our basic HCM page structure once complete save the file is float dot HD AML.

4
00:00:27,180 --> 00:00:30,500
Now we need to enter a block of text in our body.

5
00:00:30,840 --> 00:00:36,420
Make sure that the block of text is long enough so that there is enough text to wrap around the image

6
00:00:36,480 --> 00:00:37,200
you're inserting

7
00:00:42,450 --> 00:00:46,410
I've copied a large block of text in and pasting it within the body text

8
00:00:49,640 --> 00:00:53,110
next will insert the image that will be used for this tutorial.

9
00:00:53,390 --> 00:00:58,640
You can use your own image or you can use the one provided in the downloads folder corresponding to

10
00:00:58,640 --> 00:01:11,980
this lesson.

11
00:01:11,990 --> 00:01:18,840
Now we need to create the float effect by creating a style sheet and inserting the following style declaration.

12
00:01:31,990 --> 00:01:33,540
Now to create the float effect

13
00:01:45,350 --> 00:01:49,040
float right means the image will appear on the right of the text.

14
00:01:49,040 --> 00:01:51,920
We could also use the float left declaration.

15
00:01:51,950 --> 00:01:58,970
If that's if that was our intention in that case the image would appear on the left side of the text.

16
00:01:58,980 --> 00:02:05,270
We've also added a margin so there is space on the left and bottom side of the image let's save our

17
00:02:05,270 --> 00:02:13,380
file and preview it in our web browser.

18
00:02:13,480 --> 00:02:19,520
And as you can see the text is now wrapped around the image with a text 10 pixel margin on the left

19
00:02:19,520 --> 00:02:21,880
side and on the bottom of the image as well.