Normal flow is the browser’s default way of placing elements. Inline elements run alongside text and wrap at the container’s edge. Block-level elements occupy their own lines and fill the container’s width by default. These rules give a simple one-column page its initial layout before more specialized techniques are applied. section 3.1
Width and height behave differently in this flow. A parent’s width constrains its children, so text wraps within the available space. Its height, by contrast, grows from its children’s content. Set a fixed height cautiously: content that needs more room can overflow. section 3.1 section 3.7
Center a one-column page
Give the content container and the header’s inner heading the same max-width, then apply margin: 0 auto to each. The horizontal auto margins divide spare space on a wide screen; max-width lets the content shrink on a narrow one. Under normal flow, the same auto-margin technique does not center a block vertically. section 3.1.1
Listing 3.3 Styles for the double container
:root {
--brand-color: #0072b0;
--column-width: 1080px;
}
.page-header h1 {
max-width: var(--column-width); #1
margin: 0 auto; #2
}
.container {
max-width: var(--column-width); #1
margin: 0 auto; #2
}
The CSS listing shows the shared width and horizontal auto margins used to align the header with the main content. section 3.1.1
Changing the layout changes which work normal flow does for you. A float leaves normal flow, but following inline content wraps around its space. Removing an element from document flow through positioning also means checking that it neither escapes the viewport nor covers important content. Use normal flow as the baseline before choosing flexbox, grid, floats, or positioning for a different arrangement. section 14.4.1 section 6.4 section 4.0
