Website Design Edmonton       Website Design Feedback       Website Design Sitemap     Contact Website Design Company
Website Designers R Us - Home
DIV Based Layout with CSS Three column fixed layout

With little additions to the code, we can easily build a three-column fixed layout. Let’s see how it works:

<style type="text/css">
<!--
#header {
  background: #0f0;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 800px;
  height: 100px;
}
#leftcol {
  background: #f00;
  position: absolute;
  top: 100px;
left: 0px;
  width: 150px;
  height: 500px;
}
#rightcol {
  background: #f00;
  position: absolute;
  top: 100px;
left: 650px;
  width: 150px;
  height: 500px;
}
#content {
  background: #fff;
  position: absolute;
  top: 100px;
left: 150px;
  width: 500px;
  height: 500px;
}
#footer {
  background: #0f0;
  position: absolute;
  top: 500px;
  left: 0px;
  width: 800px;
  height: 100px;
}
-->
</style>

The HTML code is the following:

<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="rightcol">Right Section</div>
<div id="footer">Footer Section</div>

Here is the complete code:

<html>
<head>
<title>THREE-COLUMN FIXED LAYOUT WITH FIXED BOXES</title>
<style type="text/css">
<!--
#header {
  background: #0f0;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 800px;
  height: 100px;
}
#leftcol {
  background: #f00;
  position: absolute;
  top: 100px;
  left: 0px;
  width: 150px;
  height: 500px;
}
#rightcol {
  background: #f00;
  position: absolute;
  left: 650px;
  top: 100px;
  width: 150px;
  height: 500px;
}
#content {
  background: #fff;
  position: absolute;
  top: 100px;
left: 150px;
  width: 500px;
  height: 500px;
}
#footer {
  background: #0f0;
  position: absolute;
  top: 500px;
  left: 0px;
  width: 800px;
  height: 100px;
}
-->
</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="rightcol">Right Section</div>
<div id="footer">Footer Section</div>
</body>
</html>
Return to Listing
Website Designer R Us is the right company to get your job done professionally and cost effectively. We've seen the good, the bad, and the ugly, and we are here to help you by recommending the services that match your needs based on our knowledge of other website designers and web design companies whom can perform the type work you are needing.
 Home          ::             About Us          ::             Support            ::             Services            ::             Link Partners          ::             Contact

Copyright © 2006-2011 Website Designers R Us, a DOT Specialist Company. All rights reserved.