CSS Layout Techniques
From floats to modern layouts - master the fundamentals of positioning your content. Learn display properties, positioning schemes, and essential layout patterns.
The Display Property
The display property is fundamental to CSS layout. It determines how an element behaves in the document flow and how its children are laid out. Understanding display is the first step to mastering layout.
Block vs Inline
/* Block elements take full width */
.block {
display: block;
/* Takes up entire row, stacks vertically */
}
/* Inline elements flow with text */
.inline {
display: inline;
/* Width/height ignored, no line breaks */
}
/* Inline-block: best of both worlds */
.inline-block {
display: inline-block;
/* Can set width/height, flows horizontally */
}- block: Takes full width, starts on new line (divs, headings, paragraphs)
- inline: Only takes needed width, flows with text (spans, links, emphasis)
- inline-block: Flows inline but accepts width/height (great for layouts)
CSS Positioning
The position property controls how elements are positioned in the document. Each value completely changes how the element behaves and interacts with others.
Position Values
/* Static: default, follows document flow */
.static {
position: static;
/* top, right, bottom, left have no effect */
}
/* Relative: offset from its normal position */
.relative {
position: relative;
top: 20px;
left: 20px;
/* Original space is preserved */
}
/* Absolute: positioned relative to nearest positioned ancestor */
.absolute {
position: absolute;
top: 0;
right: 0;
/* Removed from document flow */
}
/* Fixed: positioned relative to viewport */
.fixed {
position: fixed;
bottom: 20px;
right: 20px;
/* Stays in place when scrolling */
}
/* Sticky: hybrid of relative and fixed */
.sticky {
position: sticky;
top: 0;
/* Acts relative until scroll threshold, then fixed */
}When to Use Each Position Value
- static: The default - use for normal document flow
- relative: Small adjustments, containing block for absolute children
- absolute: Tooltips, dropdowns, overlays, custom positioning
- fixed: Sticky headers, floating buttons, modals
- sticky: Section headers that stick on scroll, table headers
Z-Index & Stacking Context
.element {
position: relative; /* or absolute, fixed, sticky */
z-index: 10; /* Higher values appear on top */
}
/* z-index only works on positioned elements */
.not-positioned {
z-index: 999; /* Has no effect without position */
}Pro tip: z-index only works on positioned elements (not static). Create a new stacking context to isolate z-index layers using position, opacity, or transform.
Multi-Column Layout
CSS Multi-column creates magazine-style text layouts automatically. Perfect for long-form content where you want to break text into columns without manual wrapping.
CSS multi-column layout is a module of CSS that adds support for multi-column layouts. Support is included for establishing the number of columns in a layout, as well as how content should flow from column to column, gap sizes between columns, and column dividing lines (known as column rules) along with their appearance.
The multi-column layout specification provides a way to define how content flows through multiple columns. This makes it easier to read long blocks of text if lines aren't excessively long. Additionally, if a newspaper style display is desired, the multi-column properties can be used.
.multi-column {
column-count: 3; /* or column-width: 200px */
column-gap: 32px;
column-rule: 1px solid #e2e8f0;
}
/* Prevent elements from breaking across columns */
.multi-column h2,
.multi-column img {
break-inside: avoid;
}
/* Span an element across all columns */
.multi-column h1 {
column-span: all;
}Common Layout Patterns
Here are essential layout patterns you'll use constantly. These demonstrate how different positioning and display properties work together to create real-world layouts.
Centered Content
/* Method 1: Absolute + Transform */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Method 2: Flexbox (modern, preferred) */
.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
}
/* Method 3: Grid (also great) */
.container {
display: grid;
place-items: center;
min-height: 300px;
}Holy Grail Layout
The classic three-column layout with header and footer - header and footer span full width, content area has three columns.
.holy-grail {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 200px 1fr 200px;
min-height: 100vh;
}
.header {
grid-column: 1 / -1; /* Span all columns */
}
.footer {
grid-column: 1 / -1;
}
/* Content area uses default grid placement */Sticky Sidebar Layout
Main content area with lots of text. This demonstrates how a sticky sidebar stays in view as you scroll through long content. Perfect for navigation menus, table of contents, or supplementary information you want to keep visible.
Scroll down to see the sidebar stick to the viewport...
.layout {
display: grid;
grid-template-columns: 250px 1fr;
gap: 32px;
}
.sidebar {
position: sticky;
top: 20px; /* Offset from top when stuck */
align-self: start; /* Important! Prevents stretching */
height: fit-content;
}Card Grid
/* Auto-responsive card grid */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
}
/* Cards automatically wrap to new rows */
/* No media queries needed! */Floats (Legacy)
Floats were once the primary way to create layouts, but they've mostly been replaced by Flexbox and Grid. However, they're still useful for wrapping text around images.
This text wraps around the floated element. Floats remove an element from normal document flow but still affect surrounding content. They're perfect for magazine-style text wrapping.
Before Flexbox and Grid existed, floats were used to create entire page layouts. Those days are gone, but floats still have their place.
/* Float an image within text */
img {
float: left;
margin: 0 20px 20px 0;
}
/* Clear floats to prevent layout issues */
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* Modern alternative: use Flexbox/Grid instead */Modern alternatives: Use Flexbox or Grid for layouts. Only use floats when you specifically need text wrapping behavior.