Hello everyone and welcome back.
In today's video we will learn about display rally in like block C as this provides us with another
display value in line block.
Unlike in line element we can give a name block elements width and height.
Let's try an example to understand us better.
Say we have this span.
It has a text.
Hello.
Let's give it an 80 c span one.
Let's create another spinal let's say spine.
Do let's say hello world.
Let's say the let's open this one Mitsuko.
Let's bring about good editor.
All right let's try giving some states of this spine one so harsh spun one.
Let's say background color light blue let's save it let's give it a high C a hundred pixels let's give
it a whirl.
Say two hundred pixels.
Let's say that.
And as you can see the within height of our new element is the same similarly.
That's right.
Expand do so harsh span do let's just copy paste these here and some light blue see light.
Google let's say the and as you can see the high end with this is still not working.
Now that's stretching the display.
So display let's say inline block.
Let's save it.
As you can see the width and height of that element is increased so that's one of the major difference
between in line and in line.
BLOCK The Demon elements do not have inline block as the default display value.
But we can give them this value to design the layout.
Let's try an example to understand it better.
So you have to design this layout that you have two sections next to each other so we can do that using
inline block element.
So let's give that a try.
Let's bring up a good editor let's remove these let's quickly create this structure.
So we've got a header.
Then you've got me on the bottom we've got footer inside the mean good God
section and we've also got a assigned so the light crude is aside and say this light brown is section.
All right.
Let's get these elements some silence.
So come here.
Let's remove this say
had a
background colors a light blue.
It's a 80 pixels let's saber let's give a color and height do a photo say hi.
Three hundred pixels.
Background color light gray let's say it coming back here.
And as you can see you've got a navigation bar on the footer.
Also let's remove this margin from the body.
So body on margin.
Zero.
Let's save it.
Now let's try to give this aside and say symptom stylings.
So let's say a site background color like go to say height 450 pixels let's save it.
Similarly let's add some stylings for the section element so section let's say height 450 pixels.
Let's either I don't say bully.
Let's say that as we can see here we've got an obligation bar aside the section on the foot.
Now what we have to do is we have to bring this aside on the main section next to each other.
So let's write about
so if we get the word say 50 percent to a side would say 49 percent to section.
And as you can see these are taking half of the entire space available.
But these are still displayed below.
So that's why they are in different lines.
So let's just say display in nine block but David similarly say display in line.
Let's say that.
And now as you can see are both of these elements are not next to each other the way we wanted as few
although there's some styling for the main section as well.
So let's add that quickly.
So main that's add somebody say 16 pixels on the top and bottom then on left and right as you can see
it's looking pretty much the same.
Also for the aside the width is a bit less let's say 28 percent.
And let's give one person does margin right.
Let's say 1.
As you can see but a side element looks almost the same similarly for the section that's in Greece noted.
So we got 20 percent here.
So which goes to 69 percent.
And as you can see structures vary but there's one thing that we missed.
So if you look the dog bar is sticky so let's make that so going into this header section so to make
some things to you really position sticky for this sticky to work we have good eye condition.
So for that let's say Dog Zero.
So it would unscrew at all.
So by default it would stick to the dog.
So let's try it not as you can see a dog bite is sticking to the dog that's all for today guys.
If there's something that you do not understand if we do drop a comment and we will discuss it.
See you in the next video by anti-gay.