I have been on the look out for a way of making matching div heights for a while now and no luck. I found a way to do this with javascript but I really wanted to find a way of doing this in just straight CSS so this is what i have come up with.

So how i did this was I created a background image that tiles down which will be my boarder for my left and right column. I place this background image in a main div and then float two divs to the left adn right. Im sure there is a better way out there but this one seems to work for me being I am able to create a nicer looking boarder, so lets get started.

1. Create the background image
I created a column with a doted line and gray background in photoshop, this is the part that is going to tile down.

2. The CSS

#container {
    background: url(../images/stories/CSS_tutorials/mct_left_col.gif) repeat-y;
    border: 1px #000000 solid;
    width: 600px;}
#left_col { float:left; width: 25%;}
#right_col { float:right; width: 75%;}
#content { padding:4px;}
.clr { clear:both;}

 3. HTML 

 <div id="container">
    <div id="left_col">
        <div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc dui quam, mattis nec, laoreet eget, iaculis vitae, est. Vestibulum tempor. Sed accumsan mollis mauris. Suspendisse lorem leo, faucibus in, laoreet non, facilisis vitae, nulla. Fusce vitae nisl et turpis consectetuer congue. Fusce ac odio id sapien imperdiet feugiat. Phasellus pede. Morbi rhoncus, lorem id tempus imperdiet, orci pede sodales diam, eu pretium turpis dolor eu erat. Nulla sed risus. Suspendisse congue mauris vitae velit.
        </div>
    </div>
    <div id="right_col">
        <div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc dui quam, mattis nec, laoreet eget, iaculis vitae, est. Vestibulum tempor. Sed accumsan mollis mauris. Suspendisse lorem leo, faucibus in, laoreet non, facilisis vitae, nulla. Fusce vitae nisl et turpis consectetuer congue. Fusce ac odio id sapien imperdiet feugiat. Phasellus pede. Morbi rhoncus, lorem id tempus imperdiet, orci pede sodales diam, eu pretium turpis dolor eu erat. Nulla sed risus. Suspendisse congue mauris vitae velit.

Nunc dignissim viverra nulla. Nunc accumsan orci et neque. Pellentesque scelerisque dapibus dolor. Praesent lacus. Phasellus eu sapien ac risus consequat rhoncus. Aliquam mi urna, eleifend.
        </div>
    </div>
<div class="clr"></div>
</div>

 
Note:
I have tested this in FF and IE6 and 7 and both seem to work fine. Also If you know a better way be feel free to contact us.

View in action:
http://www.webrinse.com/tutorial_mc.html