Three-Column Layout

When height is not a concern and content drives the layout, inline-block combined with calc() can achieve the desired effect. How ever, this approach has limited applicability.

Float and position offer excellent browser compatibility, but float requires calc() which affects compatibility. Both calc() and flex have varying degrees of compatibility issues across browsers. Grid represents the future of CSS layouts, so reduced compatibility support is expected.

HTML Structure

<body>
    <div class="container">
        <aside class="sidebar-left"></aside>
        <main class="content"></main>
        <aside class="sidebar-right"></aside>
    </div>
</body>

Float Implementation

.sidebar-left,
.sidebar-right,
.content{
    float: left;
    min-height: 400px;
}
.sidebar-left,
.sidebar-right{
    width: 200px;
    background: #f5e6d3;
}
.content{
    width: calc(100% - 400px);
    background: #e0f7fa;
}

The key here is using calc() to compute the content area width dynamically.

Absolute Positioning

.container{
    position: relative;
}
.sidebar-left,
.sidebar-right,
.content{
    position: absolute;
    top: 0;
    min-height: 400px;
}
.sidebar-left{
    left: 0;
    width: 200px;
    background: #f5e6d3;
}
.sidebar-right{
    right: 0;
    width: 200px;
    background: #f5e6d3;
}
.content{
    left: 200px;
    right: 200px;
    background: #e0f7fa;
}

This method uses both left and right properties to establish the content width without relying on calc(). Alternatively, you can use left: 200px and right: 200px simultaneously for the same result.

Flexbox Implementation

.container{
    display: flex;
    min-height: 400px;
}
.sidebar-left,
.sidebar-right{
    width: 200px;
    background: #f5e6d3;
}
.content{
    flex: auto;
    background: #e0f7fa;
}

Flexbox uses flex: auto to handle the responsive behavior automatically.

Table Layout

.container{
    display: table;
    width: 100%;
    min-height: 400px;
}
.sidebar-left,
.sidebar-right,
.content{
    display: table-cell;
}
.sidebar-left,
.sidebar-right{
    width: 200px;
    background: #f5e6d3;
}
.content{
    background: #e0f7fa;
}

The middle column adapts naturaly in table layout without explicit width calculation.

CSS Grid Layout

.container{
    display: grid;
    grid-template-rows: 400px;
    grid-template-columns: 200px auto 200px;
}
.sidebar-left,
.sidebar-right{
    background: #f5e6d3;
}
.content{
    background: #e0f7fa;
}

Grid uses the auto keyword in grid-template-columns to allow the center colum to fill remaining space.