CSS Two Column
Column One


<style>

body{
text-align:center;
background-color:#000000;
}

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

.header1{
font-size:60px;
font-weight:bold;
}

.subheader1{
font-size:30px;
text-align:center;
font-weight:bold;
}

.c1{
width:50%;
float:left;
text-align:left;
background-color:#e0dcd0;
}

.c2{
width:50%;
float:left;
text-align:left;
background-color:#d0cbc0;
}
</style>
Column Two


<div class="container">

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

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

</div>

The basic layout.

The columns only stretch to the height of their respective 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);