Article Categories

Selected Reading

Creating a Page with Sidebar and Main Content Area using HTML & CSS

CSS Web Development Front End Technology

A webpage with a sidebar and main content area can be created using various CSS techniques. The most common approach is to create a layout where the sidebar takes up a fixed percentage of the width while the main content area fills the remaining space.

Syntax

.container {
    display: table;
    width: 100%;
    height: 100vh;
}

.sidebar {
    display: table-cell;
    width: percentage;
}

.main-content {
    display: table-cell;
    width: remaining-percentage;
}

Method 1: Using CSS Table Display

The following example creates a fluid sidebar and main content layout using CSS table display properties −

<!DOCTYPE html>
<html>
<head>
<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
    }
    
    .container {
        display: table;
        width: 100%;
        height: 100%;
    }
    
    .sidebar {
        display: table-cell;
        background-color: #2c3e50;
        color: white;
        width: 20%;
        vertical-align: top;
        padding: 20px;
        box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
    }
    
    .main-content {
        display: table-cell;
        background-color: #ecf0f1;
        width: 80%;
        vertical-align: top;
        padding: 20px;
    }
    
    .sidebar h3 {
        margin-top: 0;
        border-bottom: 2px solid #34495e;
        padding-bottom: 10px;
    }
    
    .sidebar ul {
        list-style: none;
        padding: 0;
    }
    
    .sidebar li {
        padding: 8px 0;
        border-bottom: 1px solid #34495e;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <h3>Navigation</h3>
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Services</li>
                <li>Contact</li>
            </ul>
        </div>
        <div class="main-content">
            <h1>Main Content Area</h1>
            <p>This is the main content area where your primary content will be displayed. The sidebar takes up 20% of the width while this area takes up 80%.</p>
            <p>The layout is fluid and will adapt to different screen sizes while maintaining the proportional relationship between the sidebar and main content.</p>
        </div>
    </div>
</body>
</html>

A webpage with a dark blue sidebar (20% width) containing a navigation menu on the left, and a light gray main content area (80% width) on the right. The layout fills the entire viewport height.

Method 2: Using Flexbox Layout

Here's a modern approach using Flexbox for better responsiveness −

<!DOCTYPE html>
<html>
<head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    html, body {
        height: 100%;
        font-family: Arial, sans-serif;
    }
    
    .container {
        display: flex;
        height: 100vh;
    }
    
    .sidebar {
        flex: 0 0 250px;
        background-color: #27ae60;
        color: white;
        padding: 20px;
        overflow-y: auto;
    }
    
    .main-content {
        flex: 1;
        background-color: #f8f9fa;
        padding: 20px;
        overflow-y: auto;
    }
    
    .sidebar h3 {
        margin-bottom: 20px;
        color: #ecf0f1;
    }
    
    .sidebar nav ul {
        list-style: none;
    }
    
    .sidebar nav li {
        margin-bottom: 10px;
        padding: 10px;
        background-color: rgba(255,255,255,0.1);
        border-radius: 4px;
    }
</style>
</head>
<body>
    <div class="container">
        <aside class="sidebar">
            <h3>Menu</h3>
            <nav>
                <ul>
                    <li>Dashboard</li>
                    <li>Profile</li>
                    <li>Settings</li>
                    <li>Reports</li>
                    <li>Logout</li>
                </ul>
            </nav>
        </aside>
        <main class="main-content">
            <h1>Dashboard</h1>
            <p>Welcome to your dashboard. This flexbox layout provides a fixed-width sidebar and a flexible main content area.</p>
            <p>The sidebar has a fixed width of 250px, while the main content area grows to fill the remaining space.</p>
        </main>
    </div>
</body>
</html>

A webpage with a green sidebar (250px fixed width) containing a menu on the left, and a light gray main content area that fills the remaining width on the right. Both sections scroll independently if content overflows.

Key Points

Table Display Method: Uses display: table-cell for equal-height columns with percentage-based widths
Flexbox Method: More modern and flexible, with better control over responsive behavior
Height Management: Both methods ensure the layout fills the entire viewport height
Overflow Handling: The flexbox method includes overflow-y: auto for independent scrolling

Conclusion

Both CSS table display and Flexbox can create effective sidebar layouts. Flexbox is recommended for modern websites due to its superior responsiveness and layout control capabilities.

AmitDiwan

Updated on: 2026-03-15T15:34:56+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next