CSS: 3 Columns Layout

By Xah Lee. Date: . Last updated: .

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

CSS 3 columns layout 7466
CSS, 3 columns layout

Here is the HTML code:

<body>
<div id="panel_middle_71538">…</div>
<div id="panel_left_91289">…</div>
<div id="panel_right_11891">…</div>
</body>

Here is CSS code:

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

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

#panel_right_11891 {
width:20%;
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: Absolute Position]

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.

Here's a complete HTML and CSS. 

<!doctype html>
<html>
<head>
<meta charset="utf-8" />

<title>Sample three columns layout</title>
</head>
<body>

<div id="panel_middle_71538">
<h1>Sample three columns layout</h1>

<p>
Sample three columns layout
</p>
</div>

<div id="panel_left_91289">
<p>left side panel</p>
</div>

<div id="panel_right_11891">
<p>right side panel</p>
</div>

</body>
</html>
∑ JS in Depth
XAH  BUY NOW

CSS

Basics

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc