Website Design Edmonton       Website Design Feedback       Website Design Sitemap     Contact Website Design Company
Website Designers R Us - Home
DIV Based Layout with CSS Adding a right column

As you can guess, with minor additions, we can add a right column to our layout:

<style type="text/css">
<!--
body {
  margin: 0px;
  padding: 0px;
}
#header {
  background: #0f0;
  width: 800px;
  height: 100px;
}
#leftcol {
  background: #f00;
  float: left;
  width: 150px;
  height: 500px;
}
#rightcol {
  background: #f00;
  float: left;
  width: 150px;
  height: 500px;
}
#content {
  background: #fff;
  float: left;
  width: 500px;
  height: 500px;
}
#footer {
  background: #0f0;
  clear: left;
  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">Left Section</div>
<div id="footer">Footer Section</div>

And, the compete code is listed below:

<html>
<head>
<title>THREE-COLUMN FIXED LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">
<!--
body {
  margin: 0px;
  padding: 0px;
}
#header {
  background: #0f0;
  width: 800px;
  height: 100px;
}
#leftcol {
  background: #f00;
  float: left;
  width: 150px;
  height: 500px;
}
#rightcol {
  background: #f00;
  float: left;
  width: 150px;
  height: 500px;
}
#content {
  background: #fff;
  float: left;
  width: 500px;
  height: 500px;
}
#footer {
  background: #0f0;
  clear: left;
  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">Left Section</div>
<div id="footer">Footer Section</div>
</body>
</html>
Return to Listing
Website Designers R Us is a professional Internet strategy and Web design company based in Toronto, Canada. We specialize in best-in-class website design, online marketing, Flash multimedia, corporate identity and print graphics. Website Designers R Us features an integrated team of web consultants, creative designers, writers, programmers and marketing professionals that know how to get online results
 Home          ::             About Us          ::             Support            ::             Services            ::             Link Partners          ::             Contact

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