Display Types

In this page, you will test different display, position and float values in CSS.

Inline Elements

• Inline elements do not start on a new line.
• They only take the space of their content.
• Examples: span, a, strong, em, img

Block Elements

• Block elements start on a new line.
• They can use the full width (unless you set a width).
• Examples: div, p, h1– h6, ul, li

Inline-Block Elements

• Inline-block elements sit next to each other on one line.
• They can have width and height.

Practice: Inline / Block / Inline-Block

Task: Go to the CSS (.inline, .block, .inline-block) and fill in the display: values.

After that, try to change margin and padding. See how the layout changes.

Inline Test

Block Test

Inline-Block Test

Hiding Elements

We can hide elements in different ways: display: none;, visibility: hidden;, and by moving them with position.

Task: Fill in the missing values in the inline styles below.

display: none

Paragraph 1 (should be visible)

Paragraph 2 (make this invisible and remove its space)

Paragraph 3 (should be visible)

visibility: hidden

Paragraph 4 (should be visible)

Paragraph 5 (make this invisible but keep its space)

Paragraph 6 (should be visible)

position + negative top

The next paragraph can be moved out of the screen using position and top.

Paragraph 7 (move me out of the screen)

Display as Table

We can make div elements act like a table and table cells.

Task: In the CSS, set display: table; for .mockTable, and display: table-cell; for .mockCell.

Positioning

Relative Positioning

Relative means the box stays in the normal flow, but you can move it a bit.

Task: Add values for left and top.

Absolute Positioning

Absolute means the box is removed from normal flow. It is placed relative to the nearest positioned parent, or the page.

Task: Add values for right and top.

Fixed Positioning

Fixed means the element stays in the same place on the screen when you scroll.

Task: Set the poop image to fixed at the bottom-left of the screen.

Absolutely, Relatively Speaking

Here, the parent <section> is position: relative;. So it will stay in place, and allow the small boxes that are position: absolute; inside it to be moved ONLY INSIDE THE section.

Task: Change one left value from px to % and see what happens.

Floats

Floats make elements move to the left or right, and text can wrap around them.

Float Right Example

Task: Make the image float to the right.

This text is inside a div. We will float the image.

After you add float: right;, this text should wrap around the image.

Float Left and Right Together

Task: Float one image left and one image right.

This paragraph will flow around the floating images above. Change the float values and see how it moves.

Clearing Floats

clear tells the browser: "Do not allow floats on this side."

clear: both

Task: Make this heading start below any floats.

This heading should be below floats

This paragraph is next to the floating image. The float is on the left.

This paragraph should move below the floating image. Use clear on the left side.

We can also clear floats using a small empty element or the overflow property.

Empty div with clear: both

Using overflow: auto

If the container has overflow: auto;, it will stretch to hold the floated elements.

Look at how the border wraps around the floated image.

Z-Index (Layer Order)

z-index decides which element is "on top". A higher number means it is in front.

Task: Set different z-index values to see which one is on top.