Forum Moderators: not2easy
#container {
position: relative;
display: block;
background: #FFFFFF; /* background color of the middle */
border-left: 200px solid #55834D; /* background of left */
border-right: 200px solid #BBCDB8; /* background of right */
overflow: visible;
padding: 0px;
margin: 0px;
}
#left {
float: left;
position: relative;
width: 200px;
margin-left: -200px;
display: inline;
}
#right {
float: right;
position: relative;
width: 198px;
margin-right: -197px;
display: inline;
}
.textpad {
padding: 5px;
margin: 0px;
}
#contents {
padding: 0px;
margin: 0px;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<!-- *******For internet explorer to see properly******* -->
<!--[if IE]>
<style type="text/css">
#container {display:inline-block;}
#left {width:197px;}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="left">
Left side contents here
</div>
<div id="right">
Right side contents here
</div>
<div id="contents">
<div class="textpad"> <!-- gives content some spacing so it isn't jammed up against the sides -->
Middle contents here
</div>
</div>
</div>
</body>
You can modify the sizing of the left and right sides to fit your needs. Also, I used the textpad in both the right and left sides as well as the middle area, so that my content of those areas wasn't jammed up against the other areas. I only showed it in the middle section in the example, though. You can use it to suite your needs, or just leave it out.
I hope this was helpful.
#column1, #column2, #column3 {
position: absolute; top: 0; left: 0; width: 100%;
}then give the first column 66% of right-padding,
give the second column 33% padding each side,
and give the third column 66% of left-padding.
