/* ========================================================================== LEFT COLUMN ========================================================================== For any layout with Contao's LEFT column enabled (2cll or 3rw). Add this stylesheet to those page layouts only — it is inert on a one-column page, but there is no reason to ship it there. Contao outputs #main BEFORE #left in the source, which is right for reading order and for search engines. The sidebar is pulled to the left visually with order: -1 rather than by reordering the markup, so the content still comes first to a screen reader. The container is NOT restated here. website_structure.css already gives .container_inside its max-width, centring and page gutter; this file only adds the flex behaviour on top. Two files setting the width is the mistake that put body content a gutter inside the header once already. Three parts: PART 1 SHELL the two-column arrangement PART 2 STICKY optional — one block, delete or comment to switch off PART 3 NARROW stacking on small screens ========================================================================== */ :root { --left-width: clamp(180px, 18vw, 260px); --left-gap: clamp(20px, 3vw, 44px); /* Distance from the top of the viewport when the sidebar sticks. Give it room to clear a fixed header if the site has one. */ --left-sticky-top: var(--space-24); } /* ========================================================================== PART 1 — SHELL ========================================================================== */ .container_inside { display: flex; gap: var(--left-gap); } #left { flex: 0 0 var(--left-width); order: -1; } #main { /* 1 1 0 rather than 1 1 auto so the content column takes the remaining space regardless of how wide its contents want to be. min-width: 0 is what actually lets it shrink — without it a wide table or a long URL pushes the column open and squeezes the sidebar. */ flex: 1 1 0; min-width: 0; /* .bleed-x escapes the page gutter with negative margins, which in a sidebar layout would reach across into the sidebar. Clipping at the content column contains it. `clip`, NOT `hidden`: hidden creates a scroll container, and a scroll container anywhere above a sticky element kills the sticking. That is the single most common reason a sticky sidebar silently stops working. */ overflow-x: clip; } /* ========================================================================== PART 2 — STICKY ========================================================================== TO SWITCH OFF: comment out or delete this one rule. Nothing else depends on it — the sidebar simply scrolls away with the page as normal. Why it works: #left is a flex item, so it stretches to the full height of the row, and .inside sticks within that box for as long as the content column is taller. No height needs to be set. IF IT DOES NOT STICK, it is almost always an ancestor with overflow set to hidden, auto or scroll — any of those creates a scroll container and sticky positions against that instead of the viewport. Check for a global `overflow: hidden` on the article or content wrappers; website_standard.css has carried one before. `overflow: clip` is safe, which is why #main above uses it. ========================================================================== */ #left > .inside { position: sticky; top: var(--left-sticky-top); } /* ========================================================================== PART 3 — SIDEBAR NAVIGATION ========================================================================== Any navigation module in the sidebar — news categories, a custom nav, a section list — renders a