Right and Left homepage sections

As @twiss pointed out, there are many online examples. For @HelenLF's case (fixed centre column, fluid coloured left/right), a modern, simple solution is CSS Grid: make three columns where the outer two are flexible (1fr) and the centre is a fixed width. Give the left and right grid cells different background colors and the centre its own background. Using min-height: 100vh on the grid keeps the colored sidebars running the full page height even when content is short.

Example (HTML + CSS):

<div class="layout">
<aside class="left"></aside>
<main class="center">Main content</main>
<aside class="right"></aside>
</div>

.layout {
display: grid;
grid-template-columns: 1fr 960px 1fr;
min-height: 100vh;
}

.left { background: #eef2ff; }
.center { background: #ffffff; }
.right { background: #fff7ee; }

If you need broader backward compatibility, Flexbox also works: wrap three elements, give the centre a fixed width (or flex: 0 0 960px) and set the sides to flex: 1. For accessibility use semantic elements (<main>, <aside>) and ensure keyboard focus and reading order match the visual layout. CSS Grid docs and Flexbox basics on MDN are good references: CSS Grid Layout on MDN and Flexbox basics on MDN.