1
00:00:01,470 --> 00:00:03,960
Hello everyone and welcome back.

2
00:00:03,960 --> 00:00:10,920
In today's video we will learn how to float extremist elements to float extremist elements.

3
00:00:10,970 --> 00:00:14,620
As this provides us with a proper equal float.

4
00:00:14,690 --> 00:00:18,140
This property is used for positioning elements.

5
00:00:18,140 --> 00:00:18,600
That's right.

6
00:00:18,610 --> 00:00:19,250
An example.

7
00:00:19,250 --> 00:00:20,680
To understand it better.

8
00:00:20,930 --> 00:00:27,500
Saying we have this paragraph with an image on some text on what we want to do is position that image

9
00:00:27,530 --> 00:00:35,400
on the left hand side index right next to it in such a case we can use float so let's give it a try.

10
00:00:35,580 --> 00:00:37,130
So let's think about good editor.

11
00:00:38,040 --> 00:00:43,990
And as you can see this is the structure of our external page you've got an article element on insight

12
00:00:44,010 --> 00:00:46,770
that you've got image on some dates.

13
00:00:46,950 --> 00:00:49,560
So we need to add some states to these elements.

14
00:00:49,710 --> 00:00:53,720
So we need this image to the left or to make it float on the left.

15
00:00:53,820 --> 00:00:57,930
We will have to use a proper float and give it the valley left.

16
00:00:57,930 --> 00:01:01,110
So let's try that so let's say

17
00:01:03,840 --> 00:01:06,120
float left that same ad.

18
00:01:06,840 --> 00:01:10,270
Let's bring up a quote in a few.

19
00:01:10,590 --> 00:01:13,940
As you can see images floating on the left hand side.

20
00:01:13,940 --> 00:01:18,430
Now let's try giving it some margin right.

21
00:01:18,730 --> 00:01:20,460
Say 16 pixels.

22
00:01:20,650 --> 00:01:21,270
Let's save it.

23
00:01:22,010 --> 00:01:27,040
And now as you can see are images floating on the left hand side of the text.

24
00:01:27,040 --> 00:01:30,830
Similarly say for this next image we want it to be on the right hand side.

25
00:01:31,330 --> 00:01:32,170
So let's try that.

26
00:01:32,790 --> 00:01:33,960
So coming by Hugh

27
00:01:38,130 --> 00:01:39,270
so this is our second image.

28
00:01:39,270 --> 00:01:43,860
Let's give it an I.D. say second image.

29
00:01:45,210 --> 00:01:47,460
Let's copy save the filing.

30
00:01:48,810 --> 00:01:53,100
Let's select this element and sort of float left.

31
00:01:53,100 --> 00:01:57,870
Now we can give it the value right let's save it.

32
00:01:59,130 --> 00:02:06,600
And as you can see now the second image is floating on the right hand side let's give it a margin left

33
00:02:07,710 --> 00:02:15,260
say margin left 16 pixels that save a looks a bit better.

34
00:02:17,110 --> 00:02:24,030
Guys that's how you use the float property to make estimate elements float left and right similarly

35
00:02:24,030 --> 00:02:29,930
let's say we want these dock menus to be under five right and say over here.

36
00:02:30,390 --> 00:02:31,800
So we can do that also.

37
00:02:32,490 --> 00:02:38,280
So coming back to our next extreme on so these are our menu items.

38
00:02:38,280 --> 00:02:41,310
It has already got a class name which is menu items.

39
00:02:41,310 --> 00:02:48,610
So coming here so all we're going to do is just make it float.

40
00:02:48,900 --> 00:02:50,870
You want it on the right hand side so right.

41
00:02:50,910 --> 00:02:51,550
Let's save it.

42
00:02:52,640 --> 00:02:55,910
And now as you can see menu items are on the right hand side.

43
00:02:56,370 --> 00:02:59,070
Although the styling is a bit also let's take care of that.

44
00:02:59,550 --> 00:03:04,410
It's been about good Ed let's bring this down.

45
00:03:05,090 --> 00:03:09,120
So right now this menu item is pollution relative on top.

46
00:03:09,130 --> 00:03:11,420
We have used minus six pixels.

47
00:03:11,520 --> 00:03:13,050
So let's bring it down to zero first.

48
00:03:13,950 --> 00:03:17,340
So as you can see on zero it moved a big down.

49
00:03:17,340 --> 00:03:20,700
That means if you give the positive value to move more bullets the bottom.

50
00:03:21,450 --> 00:03:25,100
So let's say 10 pixels and that looks much better

51
00:03:28,550 --> 00:03:29,840
and that's all for today guys.

52
00:03:29,870 --> 00:03:35,030
If there's something that you did not understand feel free to drop a comment and we will discuss it.

53
00:03:35,030 --> 00:03:37,430
See you in the next video by and get.