1 00:00:00,540 --> 00:00:03,150 Hello everyone and welcome back. 2 00:00:03,150 --> 00:00:09,750 In today's video we will learn about display rally in like block C as this provides us with another 3 00:00:09,750 --> 00:00:12,160 display value in line block. 4 00:00:12,330 --> 00:00:17,100 Unlike in line element we can give a name block elements width and height. 5 00:00:17,910 --> 00:00:20,840 Let's try an example to understand us better. 6 00:00:20,850 --> 00:00:23,480 Say we have this span. 7 00:00:23,490 --> 00:00:24,180 It has a text. 8 00:00:24,240 --> 00:00:24,760 Hello. 9 00:00:25,560 --> 00:00:27,850 Let's give it an 80 c span one. 10 00:00:29,520 --> 00:00:34,480 Let's create another spinal let's say spine. 11 00:00:34,480 --> 00:00:39,220 Do let's say hello world. 12 00:00:40,030 --> 00:00:50,580 Let's say the let's open this one Mitsuko. 13 00:00:50,830 --> 00:00:54,290 Let's bring about good editor. 14 00:00:54,320 --> 00:00:59,420 All right let's try giving some states of this spine one so harsh spun one. 15 00:01:00,000 --> 00:01:11,330 Let's say background color light blue let's save it let's give it a high C a hundred pixels let's give 16 00:01:11,330 --> 00:01:11,800 it a whirl. 17 00:01:11,810 --> 00:01:13,610 Say two hundred pixels. 18 00:01:13,610 --> 00:01:14,370 Let's say that. 19 00:01:15,260 --> 00:01:21,740 And as you can see the within height of our new element is the same similarly. 20 00:01:21,740 --> 00:01:22,350 That's right. 21 00:01:22,440 --> 00:01:33,590 Expand do so harsh span do let's just copy paste these here and some light blue see light. 22 00:01:33,650 --> 00:01:39,940 Google let's say the and as you can see the high end with this is still not working. 23 00:01:39,940 --> 00:01:41,850 Now that's stretching the display. 24 00:01:41,890 --> 00:01:46,240 So display let's say inline block. 25 00:01:46,720 --> 00:01:48,320 Let's save it. 26 00:01:48,520 --> 00:01:54,490 As you can see the width and height of that element is increased so that's one of the major difference 27 00:01:54,490 --> 00:01:55,980 between in line and in line. 28 00:01:55,990 --> 00:02:02,030 BLOCK The Demon elements do not have inline block as the default display value. 29 00:02:02,460 --> 00:02:05,810 But we can give them this value to design the layout. 30 00:02:06,180 --> 00:02:08,240 Let's try an example to understand it better. 31 00:02:09,570 --> 00:02:16,700 So you have to design this layout that you have two sections next to each other so we can do that using 32 00:02:16,790 --> 00:02:17,900 inline block element. 33 00:02:18,020 --> 00:02:19,070 So let's give that a try. 34 00:02:19,700 --> 00:02:27,430 Let's bring up a good editor let's remove these let's quickly create this structure. 35 00:02:27,430 --> 00:02:31,020 So we've got a header. 36 00:02:31,360 --> 00:02:40,060 Then you've got me on the bottom we've got footer inside the mean good God 37 00:02:43,040 --> 00:02:55,950 section and we've also got a assigned so the light crude is aside and say this light brown is section. 38 00:02:55,950 --> 00:02:56,370 All right. 39 00:02:57,000 --> 00:02:58,770 Let's get these elements some silence. 40 00:02:58,980 --> 00:02:59,660 So come here. 41 00:02:59,660 --> 00:03:01,830 Let's remove this say 42 00:03:05,020 --> 00:03:05,590 had a 43 00:03:08,670 --> 00:03:11,480 background colors a light blue. 44 00:03:11,890 --> 00:03:23,580 It's a 80 pixels let's saber let's give a color and height do a photo say hi. 45 00:03:23,580 --> 00:03:26,010 Three hundred pixels. 46 00:03:26,570 --> 00:03:32,490 Background color light gray let's say it coming back here. 47 00:03:32,530 --> 00:03:38,000 And as you can see you've got a navigation bar on the footer. 48 00:03:38,080 --> 00:03:40,510 Also let's remove this margin from the body. 49 00:03:40,660 --> 00:03:43,930 So body on margin. 50 00:03:43,930 --> 00:03:44,410 Zero. 51 00:03:44,860 --> 00:03:46,810 Let's save it. 52 00:03:46,830 --> 00:03:51,080 Now let's try to give this aside and say symptom stylings. 53 00:03:51,120 --> 00:04:01,560 So let's say a site background color like go to say height 450 pixels let's save it. 54 00:04:02,820 --> 00:04:14,020 Similarly let's add some stylings for the section element so section let's say height 450 pixels. 55 00:04:14,030 --> 00:04:18,450 Let's either I don't say bully. 56 00:04:18,610 --> 00:04:25,140 Let's say that as we can see here we've got an obligation bar aside the section on the foot. 57 00:04:25,660 --> 00:04:31,350 Now what we have to do is we have to bring this aside on the main section next to each other. 58 00:04:31,390 --> 00:04:32,200 So let's write about 59 00:04:35,840 --> 00:04:46,730 so if we get the word say 50 percent to a side would say 49 percent to section. 60 00:04:46,730 --> 00:04:50,660 And as you can see these are taking half of the entire space available. 61 00:04:51,050 --> 00:04:53,170 But these are still displayed below. 62 00:04:53,420 --> 00:04:56,380 So that's why they are in different lines. 63 00:04:56,510 --> 00:05:08,730 So let's just say display in nine block but David similarly say display in line. 64 00:05:08,840 --> 00:05:09,360 Let's say that. 65 00:05:09,970 --> 00:05:17,890 And now as you can see are both of these elements are not next to each other the way we wanted as few 66 00:05:18,560 --> 00:05:21,650 although there's some styling for the main section as well. 67 00:05:21,650 --> 00:05:22,760 So let's add that quickly. 68 00:05:23,540 --> 00:05:34,680 So main that's add somebody say 16 pixels on the top and bottom then on left and right as you can see 69 00:05:34,680 --> 00:05:36,920 it's looking pretty much the same. 70 00:05:37,140 --> 00:05:44,060 Also for the aside the width is a bit less let's say 28 percent. 71 00:05:44,060 --> 00:05:46,820 And let's give one person does margin right. 72 00:05:49,290 --> 00:05:51,730 Let's say 1. 73 00:05:51,960 --> 00:05:59,350 As you can see but a side element looks almost the same similarly for the section that's in Greece noted. 74 00:05:59,360 --> 00:06:01,790 So we got 20 percent here. 75 00:06:01,790 --> 00:06:06,420 So which goes to 69 percent. 76 00:06:06,580 --> 00:06:10,280 And as you can see structures vary but there's one thing that we missed. 77 00:06:10,750 --> 00:06:19,380 So if you look the dog bar is sticky so let's make that so going into this header section so to make 78 00:06:19,380 --> 00:06:27,220 some things to you really position sticky for this sticky to work we have good eye condition. 79 00:06:27,250 --> 00:06:29,570 So for that let's say Dog Zero. 80 00:06:30,160 --> 00:06:33,070 So it would unscrew at all. 81 00:06:33,400 --> 00:06:35,430 So by default it would stick to the dog. 82 00:06:35,830 --> 00:06:42,800 So let's try it not as you can see a dog bite is sticking to the dog that's all for today guys. 83 00:06:42,800 --> 00:06:47,870 If there's something that you do not understand if we do drop a comment and we will discuss it. 84 00:06:47,870 --> 00:06:50,410 See you in the next video by anti-gay.