Website Design Edmonton       Website Design Feedback       Website Design Sitemap     Contact Website Design Company
Website Designers R Us - Home
DIV Based Layout with CSS Fixed layout design with fixed boxes

Now, it’s time to build a basic two-column layout with fixed sizes.

Here is the code for styling our DIVS:

<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;
}
#content {
  background: #fff;
  position: absolute;
  top: 100px;
left: 150px;
  width: 700px;
  height: 500px;
}
#footer {
  background: #0f0;
  position: absolute;
  top: 500px;
  left: 0px;
  width: 800px;
  height: 100px;
}
-->
</style>

And here’s the HTML code:

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

The complete code is as follows:

<html>
<head>
<title>TWO-COLUM 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;
}
#content {
  background: #fff;
  position: absolute;
  top: 100px;
left: 150px;
  width: 650px;
  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="footer">Footer Section</div>
</body>
</html>

Let’s see what’s happening here. We have given fixed dimensions and absolute positions to all our DIVS. Widths and heights are expressed in pixels, as well as top and left coordinates.

For the sake of this article, CSS code is within the same Web page, but it should always be attached as an external file. Please remember, separating content from visual presentation is a key concept that makes websites easily maintainable and accessible.

Return to Listing
Website Designer R Us has over 12 years of IT experience and a focus on custom website design, web development and web hosting services. Our professional web design services will give your business the look and feel needed to beat your competitors! Our website design services include; web design, website redesign, website maintenance, web development, flash animation, eCommerce, shopping carts, domains, web hosting, search engine optimization, graphic design, logo design, blog writing, script installations & much more!
 Home          ::             About Us          ::             Support            ::             Services            ::             Link Partners          ::             Contact

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