This page shows a CSS layout of the common 3-column format. See rendered example here.
Create 3 “div” tags, and set each's width. 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 the CSS for these div containers should be like this:
#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; }
For the “main”, specify “margin-left” and “margin-right”. This will fix the main panel into a narrow central column.
Then, 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
margin:1ex and or padding:1ex.
〔☛ CSS Margin vs Padding〕
Any text that is not in one of the main or panel div container, will be left on the bottom.
Here's a test page you can view source: HTML: Tableless Layout with CSS: test page.