Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- 2, 3, Multi Column CSS Templates and Layouts


SuzyUK - 4:18 pm on Jul 24, 2004 (gmt 0)


3 Column liquid Page Layout - Origin [webmasterworld.com]
Uses Absolute positioning, suitable for NN4


<HTML>
<HEAD>
<TITLE>3 Column Liquid Page Layout</TITLE>
<META name="description" content="3 Column 'Liquid' page layout with pure CSS">
<META name="keywords" content="3 column liquid page layout CSS">
<style type="text/css" media="screen">
.left {
position: absolute;
left: 2%;
width: 20%;
}
.content {
position: relative;
left: 22%;
width: 50%
}
.right {
position: absolute;
left: 76%;
top: 10px;
width: auto;
}
</style>

</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080">

<!-- The LH Column -->
<DIV class="left" >
<h2>Menu?</h2><p align="justify">Menu content</p>
</div>

<!-- The Center Container -->
<DIV class="content">
<div>
<h2>Content1</h2><p align="justify">The quick brown fox jumped over the lazy dog several times in his excitement at having cracked this problem and then took a break. The quick brown fox jumped over the lazy dog several times in his excitement at having cracked this problem. </p>
</div>
<div>
<h2>Content2</h2><p align="justify">The quick brown fox jumped over the lazy dog several times in his excitement at having cracked this problem and then took a break. The quick brown fox jumped over the lazy dog several times in his excitement at having cracked this problem. </p>
</div>
</div>

<!-- The RH Column -->
<div class="right"><h2>Menu?</h2>
<p align="justify">More Menu content</p>
</div>

</BODY>
</HTML>


Thread source:: http://www.webmasterworld.com/css/4185.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com