We can use the display property to change the visibility or positioning of an element relative to another
on this HMO page.
We've set up for style definitions one for each div that we have in our HMO body container Div 1 2 and
3.
And we can see the corresponding I.D. here.
The first definition is for the container div.
It specifies that the div will have a width and height of four hundred pixels and a one pixel block
border inside the container.
We have three additional divs Div 1 2 and 3 each one of these nested divs has a width and height property
set to 50 pixels and also a background color and each of the divs have a different background color
so we can distinguish between them
if we take a look at this file in our web browser.
We can see that by default each nested div falls one below the other.
Or what if we want in each div to be displayed next to the other in a line.
To do that we can add the display property to each div
we'll set the value of this property to inline block
now if we refresh the page you can see that each div is now beside the other
we can also set the display properties to none.
If we want to make an element invisible.
So for example if we did not want div 3 to be visible just change display to none.
Save the file and refresh and you can see that we can no longer see that element.