Summary - Header layout

Build a header layout with display and position properties.

Plan for a header layout

In this summary you combine display and position concepts and build a header layout. A header usually holds a title, a menu and a badge; each piece wants different display and position values.

Plan: first the header wrapper takes position: relative; then the menu is laid out with display: inline-block; finally the badge is pinned to the top-right corner with position: absolute.

Three concepts working together

In this layout three concepts interlock. display: inline-block lays menu items side by side while still allowing width and height. position: relative makes the wrapper the containing block for the position: absolute badge.

So the badge sits in the wrapper's top-right corner via top: 0 and right: 0. The three declarations work as one.

Exercise Build the header shell

Write a header.top class selector and assign three declarations: position: relative, padding: 1rem, background: whitesmoke. The header shell then becomes the containing block for the badge.

Show example solution

/* header shell */
header.top {
  position: relative;
  padding: 1rem;
  background: whitesmoke;
}

Exercise Add the menu and badge styles

Add two style blocks. First a header.top nav a descendant selector with display: inline-block and padding: 0.25rem 0.5rem. Second a header.top .badge descendant selector with position: absolute, top: 0, right: 0.

Show example solution

/* menu and badge styles */
header.top nav a {
  display: inline-block;
  padding: 0.25rem 0.5rem;
}
header.top .badge {
  position: absolute;
  top: 0;
  right: 0;
}

Test yourself

Where does the badge stick in this layout?
```
header.top {
  position: relative;
}
header.top .badge {
  position: absolute;
  top: 0;
  right: 0;
}
```
- Top-left corner of the browser window
- Its own place in the document flow
- Top-right corner of the header.top wrapper
- At the bottom of the page
Show answer

Top-right corner of the header.top wrapper — Correct. Since header.top is position: relative, it is the badge's containing block; top:0 right:0 places it at the top-right corner.

Next lesson: Overflow visible and hidden

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies