three column CSS without relative positioning

How can i implement a three column CSS without using relative positioning of the columns.
LVL 1
Anthony MatovuBusiness Analyst, MTN UgandaAsked:
Who is Participating?
 
qwerty021600Commented:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body  {
      font: 100% Verdana, Arial, Helvetica, sans-serif;
      background: #666666;
      margin: 0;
      padding: 0;
      text-align: center;
      color: #000000;
}
.thrColAbs #container {
      position: relative;
      width: 780px;  
      background: #FFFFFF;
      margin: 0 auto;
      border: 1px solid #000000;
      text-align: left;
}

.thrColAbs #sidebar1 {
      position: absolute;
      top: 0;
      left: 0;
      width: 20%;
      background: #EBEBEB;
      padding: 15px 10px 15px 20px;
}
.thrColAbs #sidebar2 {
      position: absolute;
      top: 0;
      right: 0;
      width: 20%;
      background: #EBEBEB;
      padding: 15px 10px 15px 20px;
}
.thrColAbs #mainContent {
      margin: 0 200px;
      padding: 0 10px;
        width: 45%;
}
.fltrt {
      float: right;
      margin-left: 8px;
}
.fltlft {
      float: left;
      margin-right: 8px;
}
-->
</style></head>

<body class="thrColAbs">

<div id="container">
 
  <div id="mainContent">
    <h1> Main Content </h1>
    <p>Column 2</p>
    <!-- end #mainContent --></div>
      <div id="sidebar1">
  <h3>Sidebar1 </h3>
    <p>Column1</p>
    <!-- end #sidebar1 --></div>
  <div id="sidebar2">
    <h3>Sidebar2 </h3>
    <p>Column 3 </p>
  </div>
</div>
</body>
</html>
0
 
qwerty021600Commented:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body  {
      font: 100% Verdana, Arial, Helvetica, sans-serif;
      background: #666666;
      margin: 0;
      padding: 0;
      text-align: center;
      color: #000000;
}
.thrColAbs #container {
      position: relative;
      width: 780px;  
      background: #FFFFFF;
      margin: 0 auto;
      border: 1px solid #000000;
      text-align: left;
}

.thrColAbs #sidebar1 {
      position: absolute;
      top: 0;
      left: 0;
      width: 150px;
      background: #EBEBEB;
      padding: 15px 10px 15px 20px;
}
.thrColAbs #sidebar2 {
      position: absolute;
      top: 0;
      right: 0;
      width: 160px;
      background: #EBEBEB;
      padding: 15px 10px 15px 20px;
}
.thrColAbs #mainContent {
      margin: 0 200px;
      padding: 0 10px;
}
.fltrt {
      float: right;
      margin-left: 8px;
}
.fltlft {
      float: left;
      margin-right: 8px;
}
-->
</style></head>

<body class="thrColAbs">

<div id="container">
 
  <div id="mainContent">
    <h1> Main Content </h1>
    <p>Column 2</p>
    <!-- end #mainContent --></div>
      <div id="sidebar1">
  <h3>Sidebar1 </h3>
    <p>Column1</p>
    <!-- end #sidebar1 --></div>
  <div id="sidebar2">
    <h3>Sidebar2 </h3>
    <p>Column 3 </p>
  </div>
</div>
</body>
</html>

Try this
0
 
Anthony MatovuBusiness Analyst, MTN UgandaAuthor Commented:
This works, but what do the two parameters for do (margin: 0 200px;) and is it possible to use percentages instead of absolute and relative.

0
 
qwerty021600Commented:
Margin is to align the DIV's in proper spacing with each other.
also percentage can be replaced by pixels but not by position.
0
 
Anthony MatovuBusiness Analyst, MTN UgandaAuthor Commented:
Thanks, I am wondering about the two parameter for margin (0 and 200px) is one left and the other right.  is it also possible to use   (width = 20% for left column, width=60% for midle column, and width = 20% for the right column.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.