Ok, I am getting closer. If anyone can help I would appreciate it. I did find the script to equalize column heights, so ignore my last question please. Now I have one outstanding issue. The column called "content column" in this layout example is not properly equalizing. I just threw a non-breaking space in there, and that column does not get forced to the maximum height it needs to match the "left" column (actually middle). I will paste the code below. Any help is appreciated.... thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TK</title>
<script src="equalcolumns.js" type="text/javascript"></script>
<style type="text/css">
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
background: #000000;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
margin-left: -12%; /*Set left margin to -(RightColumnWidth)*/
}
#contentcolumn{
margin: 0 760px 0 12%; /*Set margin to 0 (LeftColumnWidth) 0 (RightColumnWidth)*/
background: #666666;
}
#leftcolumn{
float: left;
width: 760px; /*Width of left column in pixels*/
margin-left: -760px; /*Set left margin to -(LeftColumnWidth)*/
background: #ffffff;
}
#rightcolumn{
float: left;
width: 12%; /*Width of right column in percentage*/
background: #666666;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="topsection"><div class="innertube">TK HEADER CONTENT</div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"> </div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin dolor mauris, adipiscing vel, facilisis eget, consectetuer ac, massa. Sed vulputate rhoncus velit. Curabitur accumsan pretium velit. Nulla facilisi. Praesent ornare velit et tellus luctus pulvinar. Pellentesque eu diam. Maecenas ultrices pretium tellus. Curabitur eu mauris. Donec feugiat. Maecenas hendrerit fermentum libero.
Integer lacus. Etiam commodo nibh sed velit. Vestibulum in leo. Ut mi. Cras diam. Nunc dui odio, tempus sed, pretium eget, dictum non, mauris. Phasellus luctus tellus ut tortor. Morbi massa. Suspendisse dictum leo vitae est. Pellentesque rhoncus blandit turpis. Nunc eleifend sodales sem. Aenean ultricies. Morbi bibendum molestie lectus.
Duis rutrum. Proin placerat sagittis risus. Morbi pharetra velit ultrices mi. Ut lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec turpis augue, ultricies sed, feugiat non, rhoncus et, leo. Maecenas dapibus lobortis eros. Nullam id ante at enim congue fermentum. Sed non nulla. Pellentesque sollicitudin urna sed erat. Nunc sit amet diam in ipsum accumsan tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nullam et massa. Aenean et lacus. Nunc quam mi, viverra nec, sollicitudin quis, dapibus eget, elit. Quisque ipsum. Nam dapibus sapien at felis. Pellentesque pede risus, varius ut, ornare a, hendrerit in, enim. Nam in dui vitae tortor suscipit placerat. Mauris fermentum condimentum mauris. Suspendisse mauris nulla, feugiat sit amet, sagittis id, lacinia sit amet, mi. Curabitur fermentum lacus non tortor. Donec sit amet pede. In neque nulla, aliquam sit amet, ornare sed, sollicitudin nec, dui. Mauris ac lorem volutpat sem luctus porttitor. Praesent magna risus, adipiscing ut, varius in, tristique sed, metus. Pellentesque euismod sapien non arcu iaculis convallis.
Pellentesque ut nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam accumsan. Aliquam vel risus sit amet velit vestibulum laoreet. Maecenas nec dui. Suspendisse dui libero, consequat ac, vehicula ac, mattis sit amet, metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed venenatis neque nec felis aliquam fringilla. Duis eu neque. Nam id sem. Sed a sapien. Mauris id pede. </div>
</div>
<div id="rightcolumn">
<div class="innertube"> </div>
</div>
<div id="footer">TK FOOTER CONTENT</div>
</div>
</body>
</html>