Core Code
Core Code Modern Dev Handbook

Three Column Layout

A layout with left sidebar, content, and right sidebar.

Preview

Code

<style>
.container{
display:flex;
}

.sidebar{
width:150px;
background:#e5e7eb;
padding:10px;
}

.content{
flex:1;
padding:10px;
background:#f9fafb;
}
</style>

<div class="container">
<div class="sidebar">Left</div>
<div class="content">Main</div>
<div class="sidebar">Right</div>
</div>

More CSS Website Layout Examples (8)

example Basic Website Layout open example example Two Column Layout open example example Grid Website Layout open example example Centered Layout open example example Header Navigation Layout open example example Card Grid Layout open example example Sticky Footer Layout open example example Flexbox Center Layout open example