HTML and CSS Layout Fundamentals
HTML & CSS: Layout Fundamentals
Start layout by understanding the default document flow.
Master block, inline, and inline-block behaviors before reaching for advanced techniques like positioning, Flexbox, and Grid.
Normal flow recap
- Block elements stack vertically, take full width, and respect top/bottom margins.
- Inline elements sit inside a line box and respect left/right margins but not top/bottom.
- Inline-block elements flow inline while allowing width/height control.
Note: Normal flow is the browser's automatic layout.
Learn it first so advanced techniques like Flexbox make sense.
If you want to read more about CSS Display or get an in-depth understanding, go to CSS Display in the CSS tutorial.
Controlling display
Switch the flow behavior with the display property:
display: block;promotes inline content to a full-width block.display: inline-block;creates boxes that flow like text but can be sized.display: none;removes element from layout (and accessibility tree unless managed).
Note: When you hide elements with display: none, screen readers also ignore them, so use it carefully.
Example: card list
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<ul class="cards">
<li>Launch checklist</li>
<li>Design tokens</li>
<li>Accessibility audit</li>
</ul>
</body>
</html>
.cards {
display: flex;
gap: 24px;
}
.cards li {
list-style: none;
flex: 1 1 200px;
padding: 16px;
border: 1px solid #e2e8f0;
border-radius: 12px;
}
Learn more: CSS display reference.
Containing floats
Legacy layouts often used floats.
If you encounter them:
- Apply
float: left;orfloat: right;to take elements out of normal flow. - Clear the float using
overflow: auto;orclearfixutilities. - Modern layouts should prefer Flexbox or Grid, but floats remain in legacy code.
Note: Clearing a float tells the browser to start below floated items so the parent wraps around them properly.
Quick clearfix
.float-layout::after {
content: "";
display: block;
clear: both;
}
.left-column {
float: left;
width: 60%;
}
.right-column {
float: right;
width: 35%;
}
Stacking context basics
- Elements render in DOM order unless positioning or
z-indexis applied. - New stacking contexts form with properties like
position+z-index,opacity,transform, orfilter. - Manage stacking contexts intentionally to avoid unexpected overlays.
Note: A stacking context is like a mini layer system; once created, its children stack only inside that layer.
If you want to read more about CSS z-index or get an in-depth understanding, go to CSS z-index in the CSS tutorial.
