Challenge - Layout basics

Build a simple page layout with display and position.

Recall display and position

Page layout starts with display and position. display: block makes an element fill the row; display: inline-block keeps it inline while allowing width and height. These two are the most common layout bricks at beginner level.

position: relative keeps the element in the normal flow but offsets it with top, right and friends. position: absolute places it against the nearest positioned ancestor, so it usually sits inside a relative container.

Exercise Build the page layout

Add a .header class selector. Set position to relative, padding to 1rem, background to #1a1a2e, and color to #fff. Then add a .header .badge selector: display is inline-block, position is absolute, top is 0, and right is 1rem.

Show example solution

/* page layout */
.header {
  position: relative;
  padding: 1rem;
  background: #1a1a2e;
  color: #fff;
}
.header .badge {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 1rem;
}

Layout tips

The most common beginner layout pattern is this: give the container position: relative, then place a badge or icon inside it with position: absolute. The small element lands in a corner without breaking the flow.

display: inline-block is ideal for small boxes like buttons, badges and labels that sit side by side on a line. Use text-align: center for text alignment; for full-width cards block is the right choice.

Test yourself

What does display: inline-block provide?
```
.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  width: 80px;
}
```
- Stays inline while taking width and height
- Pushes the element onto a new row
- Hides the element completely
- Places it on top of the nearest ancestor
Show answer

Stays inline while taking width and height — Correct. inline-block stays inline while width, height and padding apply.

Complete the value to position the badge against the container

.header {
  position: relative;
}
.header .badge {
  position: ____;
  top: 0;
  right: 1rem;
}

Show answer

.header {
  position: relative;
}
.header .badge {
  position: absolute;
  top: 0;
  right: 1rem;
}

Match each display or position value to its role

block

Box that fills the row
inline-block

Inline box with size
relative

In-flow offset position
absolute

Fixed position against ancestor

Next lesson: Challenge - Beginner capstone

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies