Complete Web Development Guide Distributed by justEtc |
create twocol.css. Then, add the following code to the file:
div#topBanner { text-align: center; padding-bottom: 10px; }
div#bodyLeft { position: absolute; width: 25%; }
div#bodyRight { margin: 5px 25px 25px 225px; width: 75%; }
<div id="topBanner">Page Title</div>
<div id="bodyLeft">Add menu items here</div>
<div id="bodyRight">Add your content here</div></body>
Create a file like threecol.css. Put the following code
div#bodyLeft { position: absolute; padding-left: 10px; width: 25%; }
div#bodyCenter { margin-left: 190px; margin-right: 190px; width: 50%; position: absolute; }
div#bodyRight { position: absolute; padding-right: 10px; width: 25%; right: 0%; }
div#topBanner { text-align: center; padding-bottom: 15px; }
Your three column webpage will look as follows
<div id="topBanner">Page Title</div>
<div id="bodyLeft">Add menu items here</div>
<div id="bodyCenter">Add your content here</div>
<div id="bodyRight">Add your content here</div>
Then, add your text and/or graphics to the file.