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