Search pages
Search all CSS Showcase pages by name
CSS Layout Techniques
From floats to modern layouts — master 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.
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 placed in the document. Each value completely changes how the element behaves and interacts with others.
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
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.
Common Layout Patterns
Essential layout patterns you'll use constantly. These demonstrate how different positioning and display properties work together to create real-world layouts.
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.
Scroll down to see the sidebar stick to the viewport...
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.
Modern alternatives: Use Flexbox or Grid for layouts. Only use floats when you specifically need text wrapping behaviour.
Layout Best Practices
Use Grid for Page Layout
CSS Grid is ideal for two-dimensional page layouts. Define rows and columns, then place items exactly where you need them.
Flexbox for Components
Flexbox excels at one-dimensional alignment within components — navigation bars, card rows, and flexible content distribution.
Avoid Fixed When Possible
Fixed positioning removes elements from the flow and can cause accessibility issues. Prefer sticky for scroll-aware placement.
Dive Deeper
Ready to explore the full power of modern CSS layout? These topics build on the foundations covered here.