Sticky & Scroll Sidebar Ads
The layout consists of an HTML5 <section> element containing an <article> element and an <aside> element.
The article holds the main content - an image with alt text, an h1 heading, a text block and an optional CTA style link.
Sidebar Scroll - or Not
The sidebar has an optional h1 heading with scroll indicators and ad blocks which contain an image, heading text and CTA style link.
The sidebar can have an auto height so that it shows all the content or a fixed height with the overflow set to scroll as shown in this example.
Sidebar Stick
If the sidebar height is less than the main content's height, the sidebar will stick to the top of the container and remain in view as the page is scrolled.
In this example, the sidebar height is set to 840px.
Layout Switch
On computers and tablets in landscape mode, the main and sidebar sit side by side. As the viewport width is reduced, the layout switches at the break point so that both elements become full width and the sidebar slides below the main article. The add blocks then align themselves in a vertical stack.
In this example, the break point is set to 799px so that the sidebar drops below the main section when viewed on an tablet in portrait mode and a mobile phone in both landscape and portrait.
