Back to CSS Tips
Preview: what the working site looks like.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>        
    <div id="container">
        	<aside class="column" id="left"><p>some text here</p></aside>
            <aside class="column" id="right"></aside>
            <section class="column">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
            </section>    
    <!--container--></div> 
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
		<script>
            function equalHeight(group) {
               tallest = 0;
               group.each(function() {
                  thisHeight = $(this).height();
                  if(thisHeight > tallest) {
                     tallest = thisHeight;
                  }
               });
               group.height(tallest);
            }
            $(document).ready(function() {
               equalHeight($(".column"));
            });
        </script>
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	width: 800px;
	margin: 0 auto;
	background: #999;
}
aside {
	width: 100px;
	background: #c96;
}
	#left {float: left;}
	#right {float: right;}
section {
	margin: 0 120px;
	background: #f90;
}
	.column {padding: 20px 10px;}
		
The jQuery/JavaScript
		<script>
            function equalHeight(group) {
               tallest = 0;
               group.each(function() {
                  thisHeight = $(this).height();
                  if(thisHeight > tallest) {
                     tallest = thisHeight;
                  }
               });
               group.height(tallest);
            }
            $(document).ready(function() {
               equalHeight($(".column"));
            });
        </script>