CSS: 3 Columns Page Layout

By Xah Lee. Date: . Last updated: .

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

CSS 3 columns layout 7466
CSS 3 columns layout. (see raw HTML rendered example)

Here's the HTML code:

…
<body>
<div id="main">…</div>
<div id="panel-left" class="mypanel">…</div>
<div id="panel-right" class="mypanel">…</div>
</body>
…

Here's CSS code:

#main {
margin-left:20%;
margin-right:20%;
background-color:lightyellow;
}

#panel-left {
left:0;
background-color:yellow;
}

#panel-right {
right:0;
background-color:pink;
}

div.mypanel {
width:20%;
position:absolute;
top:0;
}

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

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

For the left panel, specify a width that is the same as the main's margin-left, and, specify position:absolute; left:0. This will fix the panel on the left side with a fixed width. Similar for the right pane.

You can also add padding. [see CSS Margin vs Padding]

Any text that is not in one of the main or panel div container, will be left on the bottom.

If you have a question, put $5 at patreon and message me.

CSS

Basics

Color

Font

Box Model

Layout

Transform/Animation

Line Wrap, Justification

Box Decoration

Misc