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.

HTML Table Topic

  1. HTML Table Examples
  2. HTML Table, thead, tbody, tfoot
  3. HTML Table, colgroup, col
  4. Styling HTML Table with CSS
  5. CSS: 3 Columns Page Layout
  6. Pure CSS Table
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

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

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS Basics
  4. JS in Depth
  5. JS Reference
  6. DOM
  7. SVG
  8. JS Misc