Anthony Matovu
asked on
three column CSS without relative positioning
How can i implement a three column CSS without using relative positioning of the columns.
ASKER
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.
Margin is to align the DIV's in proper spacing with each other.
also percentage can be replaced by pixels but not by position.
also percentage can be replaced by pixels but not by position.
ASKER
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
<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