CSS: 3-Column Side-Panel Layout

By Xah Lee. Date: . Last updated: .

Here is how to create a 3-columns layout using CSS.

Margin can be used to create several columns or panes.

CSS 3 columns layout 7466
CSS, 3 columns layout

Code

<body>
<div id="xPanelMid">…</div>
<div id="xPanelLeft">…</div>
<div id="xPanelRight">…</div>
</body>
#xPanelMid {
margin-left: 20vw;
margin-right: 20vw;
background-color: lightyellow;
}

#xPanelLeft {
width: 20vw;
position: absolute;
top: 0;
left: 0;
background-color: yellow;
}

#xPanelRight {
width: 20vw;
position: absolute;
top: 0;
right: 0;
background-color: pink;
}

Create 3 div elements, and set each's width.

For the middle panel, set margin-left and margin-right. This will fix it into a narrow central column.

For the left panel, specify a width that is the same as the middle's margin-left. This will fix the panel on the left side with a fixed width. Similar for the right pane.

The position:absolute is optional. It makes it into its layer. 〔see CSS: Position Absolute〕

You should also add padding. 〔see CSS Margin vs Padding〕

Any text that is not in one of the left/middle/right containers will be left on the bottom.

CSS, Layout