Relatively Simple 3 Equal-Height Columns CSS Liquid Layout

body {
font-family:Verdana, Arial, sans-serif;
font-size:10pt;
color:black;
}
code {
font-size:110%;
}
pre {
font-size:100%;
}
pre.code-view {
font-family:"Courier New", Courier, monospace;
font-size:92%;
margin:15px 5px 10px 15px;
padding:0;
color:#333333;
background-color:transparent;
overflow:auto;
}

hi, h2, h3, h4, h5 {
font-family:Georgia, Times, serif;
}
h1.title {
margin:15px 10px 0 0;
border-bottom:dashed 1px #006666;
}
h1.title span.sep {
font-family:"Courier New", Courier, monospace;
font-weight:normal;
font-size:150%;
padding:0 3px 0 3px;
vertical-align:middle;
}
h1.title span.page {
font-family:"Courier New", Courier, monospace;
font-size:130%;
letter-spacing:6px;
word-spacing:-12px;
}
h3.article-info {
font-family:Times, serif;
font-style:italic;
word-spacing:5px;
text-align:center;
margin:15px 10px 0 0;
}
h3.article-info div.date {
float:right;
font-family:"Courier New", Courier, monospace;
font-size:70%;
font-style:italic;
text-transform:uppercase;
letter-spacing:2px;
word-spacing:-4px;
color:#666666;
margin:-15px 0 0 0;
}
h3.article-info a {
font-family:Verdana, Arial, sans-serif;
font-style:normal;
font-variant:small-caps;
word-spacing:2px;
letter-spacing:2px;
}
h4.descr {
font-family:Verdana, Arial, sans-serif;
font-weight:normal;
font-style:italic;
margin:25px 10px 30px 10px;
padding:12px 20px 12px 20px;
border:dashed 1px #006666;
background-color:#FFFFDF;
color:#003333;
}

br.topic-separator {
font-size:8px;
height:8px;
}

a.topic-nav {
padding:0;
font-style:normal;
text-decoration:none;
background-color:transparent;
}
a.topic-nav:link {
color:#006666;
}
a.topic-nav:visited {
color:#006666;
}
a.topic-nav:active {
color:#993333;
}
a.topic-nav:hover {
background-color:#FFFFCC !important;
}
a.current-page {
font-weight:bold !important;
}

div#index-container {
margin:10px;
}
div#index-box {
float:right;
margin:10px 10px 10px 50px;
padding:10px;
border:dashed 1px #006666;
background:#FFFFDF;
}
div#index-box div.sub-box {
padding:0;
border:dashed 1px #006666;
background:#EEFFFF;
}
div#index-box div.sub-box h2 {
font-family:"Courier New", Courier, monospace;
text-transform:uppercase;
letter-spacing:5px;
margin:0;
padding:8px 20px 6px 20px;
border-bottom:dashed 1px #006666;
text-align:center;
background:#DDFFFF;
color:#993333;
}
ul#index {
list-style-type:disc;
margin:15px 20px 15px 0;
padding:0 0 0 40px;
}
ul#index li {
font-style:italic;
}
ul#index li ul.sub-index {
list-style-type:square;
}
ul#index li ul.sub-index li ul.sub-index {
list-style-type:circle;
margin-left:20px;
padding-left:0;
}
ul#index li a.topic-nav {
padding-right:3px;
padding-left:0;
}
ul#index li a.topic-nav:hover {
padding-right:0;
padding-left:3px;
}
div#demo-container {
position:relative;
float:left;
clear:right;
left:20%;
margin-left:-20px;
margin-top:150px;
}
div.demo-view {
background:white url('demo-view.jpg') 50% 50% no-repeat;
width:260px;
height:120px;
}
div.demo-view div.title {
font-family:"Courier New", Courier, monospace;
font-size:16px;
font-weight:bold;
font-variant:small-caps;
letter-spacing:2px;
word-spacing:-4px;
text-align:center;
margin:18px 0 0 0;
color:#FFFFCC;
}
div.demo-view div.demo-content {
margin:0 15px 0 18px;
}
a.demo-link div {
margin:15px 0;
}
a.demo-link {
display:block;
height:70px;
font-family:"Courier New", Courier, monospace;
font-size:28px;
font-weight:bold;
font-variant:small-caps;
text-decoration:none;
text-align:center;
letter-spacing:3px;
word-spacing:-6px;
color:white;
}
a.demo-link span.hover {
visibility:hidden;
font-size:12px;
vertical-align:middle;
}
a.demo-link:hover {
color:#993333;
}
a.demo-link:hover span.hover {
visibility:visible;
color:white;
}

div#content {
text-align:justify;
padding-left:10px;
}
div#content h2 {
margin-left:-10px;
}
div#content h1 {
margin:45px 0 0 -10px;
}
h4.content {
padding-left:8px;
margin:25px 0 15px 0;
}
p.content {
margin:0;
padding:5px 0 5px 10px;
border-left:solid 2px #993333;
}
.example-capt {
width:735px;
margin:15px 0;
padding:0;
}
div.example {
position:relative;
width:740px;
font-size:86%;
margin:0 0 25px 0;
border:dashed 1px black;
background-color:#CCCCCC;
overflow:hidden;
}
div.ex-lab-bg {
position:relative;
width:100%;
left:24px;
background-color:#FFFFEA;
border-left:dashed 1px black;
}
div.ex-reset {
position:relative;
width:100%;
left:-24px;
}
.clearfix:after {
content: "."; 
display: block;
height: 0px;
line-height: 0px;
clear: both; 
visibility: hidden;
}		
.heightfix:before {
content:'.';
display:block;
visibility:hidden;
height:0;
line-height: 0px;
}
div.example-label {
float:left;
width:24px;
font-family:"Courier New", Courier, monospace;
font-size:120%;
font-weight:bold;
text-transform:uppercase;
}
div.example-label div {
margin:20px 6px 0 6px;
}
div.example-body {
padding:15px 0 0 0;
margin:0 15px 15px 45px;
}
div.example-code {
float:right;
width:400px;
}
table.example-code {
float:right;
margin:0;
border-collapse:collapse;
}
table.example-code td {
padding:10px;
border:dotted 1px #993333;
}
table.example-code tr.header td {
font-family:"Courier New", Courier, monospace;
font-weight:bold;
text-transform:uppercase;
letter-spacing:2px;
word-spacing:-4px;
text-align:center;
color:#993333;
}
table.example-code tr.code td {
font-family:"Courier New", Courier, monospace;
font-size:100%;
vertical-align:top;
}
table.example-code ul.code {
font-size:85%;
list-style-type:none;
list-style-image:none;
text-align:left;
margin:0;
padding:0;
}
table.example-code ul.code li {
font-family:"Courier New", Courier, monospace;
font-size:8pt;
margin-bottom:4px;
}
table.example-code ul.code li.last {
margin-bottom:0px;
}
table.example-code ul.code li.unchanged-code {
color:gray;
}
table.example-code ul.code li.removed-code {
color:gray;
text-decoration:line-through;
}
.hack-code {
background:#EEDDFF;
}
div.hack-code {
width:740px;
margin-top:40px;
border:dashed 1px black;
}
div.hack-code span.title {
position:relative;
font-size:12px;
font-weight:bold;
top:-20px;
left:-1px;
padding:5px 10px;
border:dashed 1px black;
background:#EEDDFF;
}
p.hack-code {
margin:3px 20px 18px 20px;
background:transparent;
}
table.example-code td.mark-up {
background:#FFFFFF;
}
table.example-code tr.header td.mark-up {
padding-bottom:5px;
}
table.example-code td.mark-up pre {
font-size:12px;
margin:8px 15px;
color:#555555;
}

table.examples-code {
max-width:600px;
margin:20px 0 15px 0;
border:dashed 1px black;
background-color:#FFFFEA;
}
table.examples-code td {
padding:10px;
border:dotted 1px #993333;
}
table.examples-code tr.header td {
font-family:"Courier New", Courier, monospace;
font-size:110%;
font-weight:bold;
text-transform:uppercase;
letter-spacing:2px;
word-spacing:-4px;
text-align:center;
border:solid 2px #993333;
color:#993333;
}
table.examples-code pre.code-view {
margin:0;
padding:5px 10px 5px 10px;
background:#F0F0FF;
}
table.examples-code td.example-link {
text-align:right;
}

div#page-navigator {
clear:both;
height:1%;
margin:40px 10px 40px 10px;
border-top:dashed 1px black;
}
table.navigator {
margin:15px auto 0 auto;
border:none;
border-collapse:collapse;
}
table.navigator a.topic-nav {
display:block;
margin:0;
padding:2px 9px 2px 9px;
border:none;
border-top:none;
border-bottom:none;
}
table.navigator a.topic-nav:hover {
padding:1px 9px 1px 9px;
border-top:solid 1px #006666;
border-bottom:solid 1px #006666;
}
table.navigator td.page {
font-size:115%;
text-align:center;
padding:0px 5px 0px 5px;
}
table.navigator td.prev a.topic-nav {
display:block;
width:32px;
height:30px;
margin:0;
margin-right:6px;
padding:0;
border:none !important;
background:transparent url('prev.gif') top right no-repeat;
}
table.navigator td.prev a.topic-nav:hover {
padding:0;
background-position:right -32px;
}
table.navigator td.prev a.no-page {
background:transparent url('no-prev.gif') top right no-repeat;
}
table.navigator td.prev a.no-page:hover {
background:transparent url('no-prev.gif') top right no-repeat !important;
}
table.navigator td.next a.topic-nav {
display:block;
width:32px;
height:30px;
margin:0;
margin-left:6px;
padding:0;
border:none !important;
background:transparent url('next.gif') top left no-repeat;
}
table.navigator td.next a.topic-nav:hover {
padding:0;
background-position:left -32px;
}
table.navigator td.next a.no-page {
background:transparent url('no-next.gif') top right no-repeat;
}
table.navigator td.next a.no-page:hover {
background:transparent url('no-next.gif') top right no-repeat !important;
}
table.navigator td.index {
text-align:center;
padding:8px 0 0 0;
margin:0;
}
table.navigator td.index a.topic-nav {
width:100%;
margin:0;
padding:3px 0;
font-size:80%;
letter-spacing:6px;
background:#DDFFFF;
}
table.navigator td.index a.topic-nav:hover {
padding:2px 0;
}
table.navigator td.descr {
font-family:Arial, Helvetica, sans-serif;
font-size:85%;
letter-spacing:1px;
word-spacing:-1px;
color:#999999;
text-align:center;
}