CSS Three Column

Column One

<style>

body{
text-align:center;
}

.container{
width:752px;
margin-left:auto;
margin-right:auto;
border:1px solid #AD9482;
}

.c1{
width:250px;
float:left;
text-align:left;
background-color:#e0e0e0
}

.c2{
width:250px;
float:left;
text-align:left;
background-color:#d0d0d0
}

.c3{
width:250px;
float:left;
text-align:left;
background-color:#c0c0c0; }

</style>
Column Two

<div class="container">

<div class="c1">Column One</div>

<div class="c2">Column Two</div>

<div class="c3">Column Three</div>

</div>
Column Three

Although we have three columns they only stretch to the height of the contents.

Column One
Further enhancements require additional divs with their own style rules.
Column Two
Contents
Column Three
Contents

Column One
This example uses a custom made image for the container div background which gives the effect that the columns are the same height.

In Internet Explorer the container divs height will adjust to the column div with the greatest height, but in Mozilla it does not this means a fixed height would have to be used for the container div.
Column Two
The container rule would then include

height:300px;
background-image:url(yourpic.jpg);

Column Three
Contents