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

Here's the HTML code:
<body> <div id="panel_middle_71538">…</div> <div id="panel_left_91289">…</div> <div id="panel_right_11891">…</div> </body>
Here's 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>