Learning Code

Display and Position

Display and Position work together to help you with the visual arrangement of your website.

Display

Values

Display values include:

block level elements exist on their own line/row. Block level elements can have a set size. Examples include: headings, paragraphs, divs, main & etc.

inline level elements only take up as much space as the content takes up. Multiple inline elements next to each other will display side by side. Examples include: a, img, span & etc.

inline-block, exist side by side with each other and can also be given a set size.

none is used if for some reason you do not want an element to display.

As you continue working with css, you will notice that the display value has a big impact on how well other css properties work. There are also other display values that you will find helpful later on.

Syntax

If you are working with an element and want to change the display type from the default, you use the display property:
.hide {display: none;} (this works for block and inline as well)
As always, you can specify an element type, id, or class when setting the display in css.

Values

static (the default - works with the flow of the page and is not affected by left, right, top, or bottom properties)
relative (is positioned relative to the default or normal position - leaves empty space behind)
absolute (moved out of the flow of the page, based on the nearest containing element with a relative position)
fixed (moved out of the flow of the page and stays in the same position on the screen)

Once these values are set, you can also use directional properties: left, right, top, and bottom. The values for these directional properties can be set with units (px if you want to be precise) or percentages.

Syntax

The general syntax is the same, whichever value is selected. Unless the directional value is set to 0, always specify a unit (ie. px, % or etc.).

main {position: relative; top: 30px;} (This would move the main element down 30px and leave empty space behind - the elements below would shift down in response)

footer {position: absolute; bottom: -180px; right: 0;} (Absolute positioning only works when there is a parent element set to position:relative. Assuming that body was set to a relative position, this would move the footer 180px from the bottom of body without leaving any empty space behind)

.fexample {position:fixed; right: 38%; top: 0px;} (this would move completely out of the flow of the page and always display on the same position on the screen. No empty space would be left behind.)

Can you use the Try-it Editor to try out these concepts?