1 00:00:00,000 --> 00:00:13,440 I welcome to another video I talked previously about Steve's that work as a visionary 2 00:00:13,440 --> 00:00:20,710 container death defying the different sections off our webpage gifts are used to group 3 00:00:20,710 --> 00:00:21,510 content, 4 00:00:21,510 --> 00:00:26,250 so it can be easy to style using the class or I D. 5 00:00:26,250 --> 00:00:28,750 Attributes that you have learned. 6 00:00:28,750 --> 00:00:37,750 Don't forget that these are block elements that I could buy 100% off the page reads, 7 00:00:37,750 --> 00:00:40,570 Having default behavior off, 8 00:00:40,570 --> 00:00:43,950 being stack up one on top off the other. 9 00:00:43,950 --> 00:00:50,930 Let's see now a very important property used to define your layouts. 10 00:00:50,930 --> 00:00:58,750 The foot property that is responsible for positioning and control lee out on webpages. 11 00:00:58,750 --> 00:01:08,150 This property let you put block elements side by side instead of on top off the other, 12 00:01:08,150 --> 00:01:18,010 giving control over the horizontal position often HTML elements to better understand all 13 00:01:18,010 --> 00:01:19,360 this property words. 14 00:01:19,360 --> 00:01:22,950 Let's make an example using three D EFS, 15 00:01:22,950 --> 00:01:29,750 other Neff and mine elements that I create in my coat. 16 00:01:29,750 --> 00:01:33,530 First, 17 00:01:33,530 --> 00:01:37,350 I simply defined style for my first Deve, 18 00:01:37,350 --> 00:01:49,450 using 100 pixels value for right and the background color light green for my Never Deve 19 00:01:49,450 --> 00:01:56,550 with 200 pixels of I and background Kohler Koro. 20 00:01:56,550 --> 00:02:00,730 And finally, 21 00:02:00,730 --> 00:02:02,100 for my main dif. 22 00:02:02,100 --> 00:02:09,180 I define the ICT with the value off 500 pixels and background color. 23 00:02:09,180 --> 00:02:09,750 Right? 24 00:02:09,750 --> 00:02:20,150 You see in the browser that thieves are all displayed in vertical on the top of each other 25 00:02:20,150 --> 00:02:23,230 and occupy all the patch with, 26 00:02:23,230 --> 00:02:35,360 as expected now starting changing the coat if I simple used float property with value left 27 00:02:35,360 --> 00:02:36,250 for the other. 28 00:02:36,250 --> 00:02:45,180 And if I know with off 33% I changed the position off that dif to the left, 29 00:02:45,180 --> 00:02:53,050 telling to the diva Nev that can flow around our instead off beginning underneath. 30 00:02:53,050 --> 00:03:00,080 If I had now some text to these second dif, 31 00:03:00,080 --> 00:03:03,900 you see that the text is floating around the other. 32 00:03:03,900 --> 00:03:09,930 If the text does not feed student ive, 33 00:03:09,930 --> 00:03:16,780 it happens overflow situation where a part of the deaths is outside the dif. 34 00:03:16,780 --> 00:03:27,910 Another possible scenario is when I want to defense to be side by side without having any 35 00:03:27,910 --> 00:03:29,850 element wrapping around the other. 36 00:03:29,850 --> 00:03:33,310 For this case, 37 00:03:33,310 --> 00:03:43,820 I have to add the float property to my second dif again with value left for disguise. 38 00:03:43,820 --> 00:03:50,460 We see that the DIF remains below the other because this Steve is a block element that 39 00:03:50,460 --> 00:03:54,150 occupies 100% off the weed by the fold. 40 00:03:54,150 --> 00:04:05,510 I can Onley position on the right side of together if I define a with that is equal to or 41 00:04:05,510 --> 00:04:12,150 less than the space left on the right side off the first dif like you see now in the image 42 00:04:12,150 --> 00:04:23,440 where I define a with with the value off 33% other detail visible is that the grade ive is 43 00:04:23,440 --> 00:04:25,300 now floating around the other two. 44 00:04:25,300 --> 00:04:27,050 Deif's debts. 45 00:04:27,050 --> 00:04:30,050 Every property float with value left. 46 00:04:30,050 --> 00:04:37,210 If I want to position the second div on the right side, 47 00:04:37,210 --> 00:04:43,870 I just need to change the float value from left to right and certainly you've still float 48 00:04:43,870 --> 00:04:46,100 around the two first. 49 00:04:46,100 --> 00:04:56,400 This what I want now is that less diff do not flow around the 1st 2 tiffs staying below. 50 00:04:56,400 --> 00:05:03,350 That's the scenario where I used the clear property. 51 00:05:03,350 --> 00:05:06,790 When this property receives the Value Boat, 52 00:05:06,790 --> 00:05:13,070 there are no floating elements allowed on either the left or the right side. 53 00:05:13,070 --> 00:05:17,620 So this dif moved down below the floated element. 54 00:05:17,620 --> 00:05:23,850 The clear property can still have left and right values in which, 55 00:05:23,850 --> 00:05:27,580 if we did not want elements to float on the left side. 56 00:05:27,580 --> 00:05:30,050 We applied the value left, 57 00:05:30,050 --> 00:05:35,380 and in case we do not want that to float on the right side. 58 00:05:35,380 --> 00:05:37,650 We used the value rights. 59 00:05:37,650 --> 00:05:41,860 That's the next situation. 60 00:05:41,860 --> 00:05:51,250 Toe watch I f at this moment a diva on the left side and another on the right side. 61 00:05:51,250 --> 00:05:56,610 If I apply the value clear left in my Sergeev, 62 00:05:56,610 --> 00:06:07,060 I check that Stop floating around first if Onley getting around the second dif second 63 00:06:07,060 --> 00:06:16,050 situation happens if I change value from left to right to see the d floating around left 64 00:06:16,050 --> 00:06:16,450 beef. 65 00:06:16,450 --> 00:06:23,560 I just need to change the ICT off first dif toe a value bigger than the second eve. 66 00:06:23,560 --> 00:06:26,750 Okay, 67 00:06:26,750 --> 00:06:38,440 you see now the three floating around first live and to finish I want three d is displayed 68 00:06:38,440 --> 00:06:39,900 in the same line, 69 00:06:39,900 --> 00:06:42,280 being very easy to apply. 70 00:06:42,280 --> 00:06:53,330 I just need to wear the float to my last def with barely left and give a with off 33% to 71 00:06:53,330 --> 00:06:56,080 all of them being arranged side by side. 72 00:06:56,080 --> 00:07:00,100 That's all for now. 73 00:07:00,100 --> 00:07:00,940 Thanks.