1
00:00:00,210 --> 00:00:06,330
We can use the display property to change the visibility or positioning of an element relative to another

2
00:00:07,710 --> 00:00:09,220
on this HMO page.

3
00:00:09,330 --> 00:00:19,620
We've set up for style definitions one for each div that we have in our HMO body container Div 1 2 and

4
00:00:19,820 --> 00:00:20,520
3.

5
00:00:20,760 --> 00:00:26,750
And we can see the corresponding I.D. here.

6
00:00:26,970 --> 00:00:29,910
The first definition is for the container div.

7
00:00:29,910 --> 00:00:34,890
It specifies that the div will have a width and height of four hundred pixels and a one pixel block

8
00:00:34,890 --> 00:00:39,090
border inside the container.

9
00:00:39,100 --> 00:00:47,290
We have three additional divs Div 1 2 and 3 each one of these nested divs has a width and height property

10
00:00:47,290 --> 00:00:54,800
set to 50 pixels and also a background color and each of the divs have a different background color

11
00:00:54,860 --> 00:00:56,440
so we can distinguish between them

12
00:00:59,370 --> 00:01:01,900
if we take a look at this file in our web browser.

13
00:01:03,590 --> 00:01:09,810
We can see that by default each nested div falls one below the other.

14
00:01:10,140 --> 00:01:14,180
Or what if we want in each div to be displayed next to the other in a line.

15
00:01:15,830 --> 00:01:19,250
To do that we can add the display property to each div

16
00:01:25,110 --> 00:01:29,300
we'll set the value of this property to inline block

17
00:01:37,320 --> 00:01:42,240
now if we refresh the page you can see that each div is now beside the other

18
00:01:49,240 --> 00:01:52,000
we can also set the display properties to none.

19
00:01:52,000 --> 00:01:54,410
If we want to make an element invisible.

20
00:01:54,610 --> 00:02:02,030
So for example if we did not want div 3 to be visible just change display to none.

21
00:02:02,310 --> 00:02:07,150
Save the file and refresh and you can see that we can no longer see that element.