Solved

three column CSS without relative positioning

Posted on 2009-04-06
5
315 Views
Last Modified: 2012-05-06
How can i implement a three column CSS without using relative positioning of the columns.
0
Comment
Question by:Anthony Matovu
  • 3
  • 2
5 Comments
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24075736
<!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
 
LVL 1

Author Comment

by:Anthony Matovu
ID: 24075854
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
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24075865
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
 
LVL 1

Author Comment

by:Anthony Matovu
ID: 24075969
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
 
LVL 13

Accepted Solution

by:
qwerty021600 earned 500 total points
ID: 24076009
<!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

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Can't get container centered 4 29
really easy css change help please 4 32
I need help changing the colour of this image rollover please? 3 22
Popup write two lines 3 22
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question