Fixed Sidebar and Fluid Main Content Layout with CSS Grid

.page-layout {
    display: grid;
    grid-template-columns: 250px 1fr; /* Fixed sidebar 250px, main content takes rest */
    grid-template-rows: auto 1fr auto; /* Header, Main, Footer */
    min-height: 100vh;
}

header {
    grid-column: 1 / -1; /* Spans all columns */
    background-color: #eee;
    padding: 20px;
}

.sidebar {
    background-color: #f8f8f8;
    padding: 15px;
}

.main-content {
    background-color: #fff;
    padding: 20px;
}

footer {
    grid-column: 1 / -1; /* Spans all columns */
    background-color: #ccc;
    padding: 15px;
    text-align: center;
}

/* Basic styling for demonstration */
body { margin: 0; font-family: sans-serif; }

<!-- HTML Structure -->
<div class="page-layout">
    <header><h1>Website Header</h1></header>
    <aside class="sidebar">
        <nav>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </nav>
    </aside>
    <main class="main-content">
        <h2>Main Content Area</h2>
        <p>This section takes up the remaining available width.</p>
        <p>It's fluid and responsive.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</p>
    </main>
    <footer><p>&copy; 2023 Fixed/Fluid Layout</p></footer>
</div>