Interactive demonstrations
This example demonstrates optional RSL sidebar patterns using classic float behavior. The first content block flows beside the sidebar; a second block starts below the sidebar and expands to full width (perfect for grids or “magazine” style layouts).
While CSS Grid is the backbone of the RSL layout system, floats are used here intentionally because they solve a very specific, classic layout problem that Grid cannot: allowing content to naturally wrap beside a sidebar and then automatically flow into a full-width section once it clears the sidebar’s height. This is exactly what floats were originally designed for—letting inline content wrap around a fixed block—making them ideal for dynamic CMS-generated pages where sidebar height is unknown and cannot be synced with the main content.
Quick overview:
.rsl-sidebar-layout wraps the entire sidebar + content..rsl-sidebar-left / .rsl-sidebar-right float left or right at a fixed width..rsl-main-with-sidebar or .rsl-main-with-both holds content between sidebars..rsl-below-sidebar clears the floats and becomes full width.Get up and running in 3 minutes with our Quick Start Guide!
View Quick Start GuideSidebar layouts in RSL are built from a small set of utility classes. You combine them to get left, right, or dual sidebars with content that either sits beside the sidebars or clears below them.
.rsl-sidebar-layout.rsl-sidebar / .rsl-sidebar-left.rsl-sidebar-right.rsl-main-with-sidebar.rsl-main-with-both.rsl-below-sidebarBehavior notes:
.rsl-below-sidebar uses clear: both; to snap to full width under the floats..slot-layout and .slot-item.
If you prefer to avoid manual classes, you can let sidebar.js wire things up
for you using data attributes. Mark a wrapper with .rsl-sidebar-auto and a
data-sidebar mode, then tag inner elements with
data-sidebar-slot.
data-sidebar="left" – single left sidebar.data-sidebar="right" – single right sidebar.data-sidebar="both" – left and right sidebars.data-sidebar-slot="sidebar" – generic sidebar when using left/right modes.data-sidebar-slot="left" / "right" – sidebars when using both mode.data-sidebar-slot="main" – main content beside / between sidebars.data-sidebar-slot="below" – full-width content below all sidebars.
Left Sidebar Demo
Right Sidebar Demo
Left & Right Sidebar Demo