HTML/CSS/Layout/three Columns

Содержание

1 3 column
2 3 Column fluid layout - 25% side columns
3 3 column fluid layout - 33% columns
4 3 Column fluid layout: 50% column, columns
5 3 columns, all fluid
6 Basic 3-Column Sample Page
7 Column left, column main, column right
8 Faux Three Column Liquid Layout
9 Floated Three Column Layout
10 Floated Three Column Layout 2
11 float left and right three columns
12 Header and sub header with three columns
13 Header and three columns under
14 Three Column Design Using HTML with Table
15 Three Column Elastic Layout
16 Three Column Hybrid Layout
17 Three-Column Layout Demonstration with fixed width
18 Three-Column Layout Demonstration with Javascript
19 Three Column Layout in CSS
20 Three-Column Layout with absolute position
21 three column layout with header and footer
22 Three-Column Layout without footer
23 Three column layout with sub sections
24 Three Column Liquid Layout
25 Three columns: all floating from left
26 Three columns, left and right column has abolute position
27 Three columns with header and footer
28 Three columns with navigation on the right
29 Three columns with no header and footer
30 Top and left navigational bar and three columns
31 Use absolute position to create header and three column under it
32 Use left property to control the column position
33 Use margin to layout the center column

3 column

 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#left {
  margin-right: 153px;
}
#right {
  margin-left: 150px;
}
#left_wrapper {
  width: 50%;
  margin-right: -150px;
  float: left;
  position: relative;
  z-index: 0;
}
#middle_wrapper {
  width: 300px;
  margin-right: -150px;
  float: left;
  position: relative;
  z-index: 2;
}
#right_wrapper {
  width: 49.9%;
  float: left;
  position: relative;
  z-index: 1;
}
</style>
</head>
<body>
  <div id="left_wrapper"> 
    <div id="left"> 
  <p>This is the left text :  This is the left text : 
    This is the left text :  This is the left text :
    This is the left text :  This is the left text :
    This is the left text :  This is the left text :
  </p>
  </div>
  </div>
  <div id="middle_wrapper"> 
    <div id="middle">
  <p>This is the middle text : this is the middle text 
    This is the middle text : this is the middle text 
    This is the middle text : this is the middle text 
    This is the middle text : this is the middle text 
    This is the middle text : this is the middle text 
  </p> 
    </div>
  </div>
  <div id="right_wrapper"> 
    <div id="right">
   <p>This is the right text : This is the right text 
     This is the right text : This is the right text 
    This is the right text : This is the right text 
    This is the right text : This is the right text 
   </p>
   </div>
  </div>
</body>
</html>

3 Column fluid layout - 25% side columns

 
<!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">
<head>
<title>3 Column fluid layout - 25% side columns</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#container {
  border: 1px solid #000;
  position: relative
}
#cell3 {
  width: 100%;
  background: #aaa;
  float: left;
  margin: 0;
  position: relative;
}
#cell2 {
  width: 75%;
  background: #bbb;
  float: left;
  border-right: 1px solid #000;
}
#cell1 {
  width: 33.3%;
  background: #ccc;
  float: left;
  border-right: 1px solid #000;
}
#cell2a,#cell3a {
  float: right;
  position: relative;
}
#cell2a {
  width: 200%;
  margin-right: -199.5%;
}
#cell3a {
  width: 50%;
  margin-right: -49.5%;
}
* html #cell3a {
  margin-right: -100%
}
h1 {
  background: #fff;
  text-align: center;
  margin: 0;
  border-bottom: 1px solid #000
}
#footer {
  text-align: center;
  height: 30px;
  background: #ddd;
  border-top: 1px solid #000;
  clear: both;
}
</style>
</head>
<body>
<div id="container">
<h1>Three column fluid layout</h1>
<div id="cell3"> 
  <div id="cell2"> 
    <div id="cell1"> 
      <div id="cell2a"> 
        <div id="cell3a"> 
      <p>This is some text for the right column : </p>
      </div>
    <p>This is some text for the center column : </p>
    </div>
    <p>This is some text for the left column : This is some text for the left column.</p></div>
  </div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

3 column fluid layout - 33% columns

 

<!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">
<head>
<title>3 column fluid layout - 33% columns</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#header {
  height: 50px;
  border-bottom: 20px solid #363;
  background: #aaa;
  text-align: center;
}
#cell3 {
  width:100%;
  background: #ddd;
  float:left;
  margin:0;
}
#cell2 {
  width:66.6%;
  float:left;
  background: #ccc;
  border-right: 1px solid #999;
}
#cell1 {
  width:50%;
  background:#bbb;
  float:left;
  border-right: 1px solid #999;
}
#cell2a, #cell3a {
  float:right;
  position:relative;
  width:100%;
  margin-right:-99.9%;
}
#footer {
  clear: both;
  height: 25px;
  background: #FFF;
  text-align: center;
  border-top:1px solid #000;
}
</style>
</head>
<body>
<div id="header">
  <h1>this is the title</h1>
</div>
<div id="cell3"> 
  <div id="cell2"> 
    <div id="cell1"> 
      <div id="cell2a"> 
        <div id="cell3a"> 
          <h2>Sub header</h2>
          <p>this is a test. </p>
          <h2>Sub header</h2>
          <p>this is a test. </p>
        </div>
        <h2>Sub header</h2>
        <p>this is a test. </p>
        <p>this is a test. </p>
        <p>this is a test. </p>
        <p>this is a test. </p>
      </div>
      <h1>Headline</h1>
      <h2>Sub Header</h2>
      <p>this is a test. </p>
      <p>this is a test. </p>
    </div>
  </div>
</div>
<div id="footer">| footer | </div>
</body>
</html>

3 Column fluid layout: 50% column, columns

 

<!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">
<head>
<title>3 Column fluid layout - 50% column + 2 x 25% columns</title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#header {
  height: 50px;
  border-bottom: 20px solid #fff;
  background: bbb;
}
#cell3 {
  width: 100%;
  background: #aaa;
  float: left;
  margin: 0;
}
#cell2 {
  width: 75%;
  float: left;
  background: #ccc;
  border-right: 1px solid #99c;
}
#cell1 {
  width: 66.6%;
  background: #eee;
  float: left;
  border-right: 1px solid #99c;
}
#cell2a,#cell3a {
  float: right;
  position: relative;
  width: 50%;
  margin-right: -49.5%;
}
#cell3a {
  width: 100%;
  margin-right: -100%
}
#footer {
  clear: both;
  height: 25px;
  background: #FFF;
  text-align: center;
  border-top: 1px solid #000;
}
</style>
</head>
<body>
<div id="header">
  <h1>This is the header</h1>
</div>
<div id="cell3"> 
  <div id="cell2"> 
    <div id="cell1"> 
      <div id="cell2a"> 
        <div id="cell3a"> 
            <h2>Sub header</h2>
            <p>this is a test.</p>
            <h2>Sub header</h2>
            <p>this is a test.</p>
        </div>
    <p>center column.</p>
      </div>
      <h1>Headline</h1>
      <h2>Sub Header</h2>
      <p>this is a test. </p>
    </div>
  </div>
</div>
<div id="footer">Copyright | footer | </div>
</body>
</html>

3 columns, all fluid

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title></title>
<style type="text/css">
  #mainright {
    width:33%;
    float:left;
    background:#aaa;
    padding-bottom:10px;
  }
  
  #maincenter {
    width:34%;
    float:left;
    background:#bbb;
    padding-bottom:10px;
  }
  
  #mainleft {
    width:33%;
    float:left;
    background:#ccc;
    padding-bottom:10px;
  }
  
  #banner {
    background:#ddd;
  }
  
</style>
</head><body>
<div id="banner"><h1>3 columns, all fluid</h1></div>
<div id="mainleft">
  <h1>mainleft</h1>
  <p>this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  </p>
</div>
<div id="maincenter">
  <h1>maincenter</h1>
  <p>this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. </p>
</div>
<div id="mainright">
  <h1>mainright</h1>
  <p>this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  </p>
  
</div>
</body>
</html>

Basic 3-Column Sample Page

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type"
  content="text/html; charset=iso-8859-1" />
<style type="text/css">
.content>p {
  margin: 0;
}
.content>p+p {
  text-indent: 30px;
}
.content {
  position: relative; 
  width: auto;
  min-width: 120px;
  margin: 0 210px 20px 170px;
  border: 1px solid black;
  padding: 10px;
  z-index: 3;
}
#navleft {
  position: absolute;
  width: 128px;
  top: 20px;
  left: 20px;
  font-size: 0.9em;
  border: 1px dashed black;
  padding: 10px;
  z-index: 2;
}
#navright {
  position: absolute;
  width: 168px;
  top: 20px;
  right: 20px;
  border: 1px dashed black;
  padding: 10px;
  z-index: 1;
}
</style>
</head>
<body>
<div class="content"> 
  <h1>header</h1>
  <p>Web.</p>
  <p>What?</p>
</div>
<div class="content"> 
  <h2>CSS in Context</h2>
  <p>their systems.</p>
</div>
<div class="content">
  <h2>Content</h2>
  <p>page.</p>
</div>
<div id="navleft">
  <h2>Some Links</h2>
  <p>
    <a href="" title="">Home Page</a><br/>
    <a href="" title="">Home</a><br/>
    <a href="" title="">Book</a><br/>
    <a href="" title="">One</a><br/>
    <a href="" title="">Here</a><br/>
    <a href="" title="">Nowhere</a><br/>
    <a href="" title="">Four</a><br/>
    <a href="" title="">Link</a><br/>
  </p>
</div>
<div id="navright">
  <h2>CSS</h2>
  <p>CSS.</p>
  <p>subject,
     <a href="mailto:d@d.ru">drop me an email</a></p>
</div>
</body>
</html>

Column left, column main, column right

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#columnRight {
 width: 33%;
 float: left;
 background: white;
 padding-bottom: 1em;
}
#columnLeft {
 width: 20%;
 float:left;
 background: white;
 padding-bottom: 1em;
 text-align: justify;
}
#columnMain {
 width:47%;
 float:left;
 background: white;
 padding-bottom: 1em;
}
#footer {
 clear: both;
 padding-bottom: 1em;
 border-top: 1px solid #333;
 text-align: center;
}
</style>
</head>

<body>
<div id="header">
<h1>Header header header header header header</h1>
</div>
<div id="columnLeft">
  <h3>Navigation</h3>
  <p>
  <ul>
  <li><a href="">Q</a></li>
  <li><a href="">N</a></li> 
  <li><a href="">C</a></li> 
  <li><a href="">D</a></li>
  <li><a href="">R</a></li> 
  </ul>
  </p>
</div>
<div id="columnMain">
<p>This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. 
</p>
</div>
<div id="columnRight">
<p>This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. 
</p>
</div>
<div id="footer">
  <p>footer footer footer footer footer. </p>
</div>
  
</body>
</html>

Faux Three Column Liquid Layout

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Faux Three Column Liquid Layout</title>
<style type="text/css">
#branding {
  height: 50px;
  background-color:#b0b0b0;
  padding: 20px;
}
#mainNav {
  list-style: none;
}
#secondaryContent h2 {
  margin: 0;
}
#footer {
  background-color:#b0b0b0;
  padding: 1px 20px;
}
body {
  min-width: 760px;
}
#wrapper {
  width: 85%;
  margin: 0 auto; 
  text-align: left;
  background: #fff;
}
#wrapper2 {
  background: pink;
}
#mainNav { 
  width: 16%;
  float: left;
}
#content { 
  width: 75%; 
  float: right; 
}
#mainContent { 
  width: 66%; 
  margin: 0; 
  float: left; 
} 
#secondaryContent { 
  width: 31%;
  min-width: 10em;
  display: inline;
  float: right;
} 
#footer { 
  clear: both; 
}
#mainNav, #secondaryContent {
  padding-top: 20px;
  padding-bottom: 20px;
}
#mainNav *, #secondaryContent * { 
 padding-left: 20px;
 padding-right: 20px;
}
#mainNav * *, #secondaryContent * * { 
 padding-left: 0;
 padding-right: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="wrapper2">
<div id="branding">
<h1>Branding</h1>
</div> 
<div id="content"> 
<div id="mainContent">
<h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<h2>Ea commodo consequat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<h2>Magna aliquam erat volutpat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div> 
<div id="secondaryContent">
<h2>Magna aliquam erat volutpat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
</div>
<ul id="mainNav"> 
<li class="first"><a href="#">Home</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">News</a></li> 
<li><a href="#">Products</a></li> 
<li><a href="#">Services</a></li> 
<li><a href="#">Clients</a></li> 
<li><a href="#">Case Studies</a></li> 
</ul> 
<div id="footer">
<p>Footer</p>
</div>
</div>
</div>
</body>
</html>

Floated Three Column Layout

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Floated Three Col Layout</title>
<style type="text/css">
#branding {
  height: 50px;
  background-color:#b0b0b0;
  padding: 20px;
}
#mainNav {
  list-style: none;
  background-color:#eee;
}
#secondaryContent {
  background-color:#eee;
}
#footer {
  background-color:#b0b0b0;
  padding: 1px 20px;
}
body {
  min-width: 760px;
}
#wrapper {
  width: 720px; 
  margin: 0 auto; 
}
#mainNav { 
  width: 180px; 
  float: left; 
}
#content { 
  width: 520px; 
  float: right; 
}
#mainContent { 
  width: 320px; 
  margin: 0; 
  float: left; 
}
#secondaryContent { 
  width: 180px;
  display: inline; 
  float: right; 
} 
#footer { 
  clear: both; 
} 
#mainNav, #secondaryContent {
  padding-top: 20px;
  padding-bottom: 20px;
}
#mainNav *, #secondaryContent * {
  padding-left: 20px;
  padding-right: 20px;
}
#mainNav * *, #secondaryContent * * {
  padding-left: 0;
  padding-right: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="branding">
<h1>Branding</h1>
</div> 
<div id="content"> 
<div id="mainContent">
<h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<h2>Ea commodo consequat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<h2>Magna aliquam erat volutpat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div> 
<div id="secondaryContent">
<h2>Magna aliquam erat volutpat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
</div>
<ul id="mainNav"> 
<li class="first"><a href="#">Home</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">News</a></li> 
<li><a href="#">Products</a></li> 
<li><a href="#">Services</a></li> 
<li><a href="#">Clients</a></li> 
<li><a href="#">Case Studies</a></li> 
</ul> 
<div id="footer">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>

</div>
</body>
</html>

Floated Three Column Layout 2

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Floated Three Col Layout</title>
<style type="text/css">
#branding {
  height: 50px;
  background-color:#b0b0b0;
  padding: 20px;
}
#mainNav {
  list-style: none;
}
#footer {
  background-color:#b0b0b0;
  padding: 1px 20px;
}
body {
  text-align: center; 
  min-width: 760px;
}
#wrapper {
  width: 720px; 
  margin: 0 auto; 
  text-align: left;
  background: #fff;
}
#mainNav { 
  width: 160px; 
  float: left; 
}
#content { 
  width: 520px; 
  float: right; 
}
#mainContent { 
  width: 320px; 
  margin: 0; 
  float: left; 
}
#secondaryContent { 
  width: 180px;
  display: inline;
  float: right; 
} 
#footer { 
  clear: both; 
} 
#mainNav, #secondaryContent {
  padding-top: 20px;
  padding-bottom: 20px;
}
#mainNav *, #secondaryContent * {
  padding-left: 20px;
  padding-right: 20px;
}
#mainNav * *, #secondaryContent * * {
  padding-left: 0;
  padding-right: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="branding">
<h1>Branding</h1>
</div> 
<div id="content"> 
<div id="mainContent">
<h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<h2>Ea commodo consequat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<h2>Magna aliquam erat volutpat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div> 
<div id="secondaryContent">
<h2>Magna aliquam erat volutpat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
</div>
<ul id="mainNav"> 
<li class="first"><a href="#">Home</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">News</a></li> 
<li><a href="#">Products</a></li> 
<li><a href="#">Services</a></li> 
<li><a href="#">Clients</a></li> 
<li><a href="#">Case Studies</a></li> 
</ul> 
<div id="footer">
<p>Footer</p>
</div>

</div>
</body>
</html>

float left and right three columns

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html>
        <head>
            <title></title>
            <style type="text/css">
                body {
                    margin: 0;
                    padding: 8px;
                }
                p {
                    border: 1px solid black;
                    padding: 10px;
                    background: rgb(218, 218, 218);
                    margin: 10px;
                }
                p#left {               
                    float: left;
                    width: 200px;
                }
                p#right {
                    float: right;
                    width: 200px;
                }
                p#center {
                    margin: 10px 231px;
                }
            </style>
        </head>
        <body>
            <p id="left">
                This is the text of the first paragraph. This is the text of the first paragraph. This is the text of the first paragraph.  This is the text of the first paragraph.
            </p>
            <p id="right">
                This is the text of the second paragraph. This is the text of the second paragraph.  This is the text of the second paragraph.  This is the text of the second paragraph.
            </p>
            <p id="center">
                This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.  This is the text of the third paragraph.
                This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
                This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
                This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. 
                This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
                This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
                This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
                This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
            </p>
        </body>
    </html>

Header and sub header with three columns

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Default document layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
#wrapper {
  text-align: left;
  border: 1px solid #033;
  position: relative;
  font-size: 1.4em;
}
#header {
  background-color: #033;
  color: #fff;
  padding: 10px;
}
#subHeader {
  background: #009F9F;
  color: #fff;
  padding: 5px 10px;
}
body#cols3 #content-wrapper {
  padding-left: 9em;
  padding-right: 11em;
}
body#cols3 #navigation {
  position: absolute;
  top: 6.8em;
  left: 0;
}
body#cols3 #related {
  position: absolute;
  top: 6.8em;
  right: 10px;
}
#navigation ul,#related h2 {
  margin-top: 0;
  padding-top: 0;
}
#related ul {
  margin: 0;
  padding-left: 15px;
}
#footer {
  padding: 5px 0 5px 160px;
  clear: both;
  background: #D9FFF8;
  font-size: 0.8em;
  color: #030;
}
</style>
</head>
<body id="cols3">
<div id="wrapper">
 <div id="header"><h1>Header</h1></div>
 
 <div id="subHeader">Europe</div>
 
 <div id="content-wrapper">
  <div id="content-inner">
  <p>this is a test<BR/>. <BR/>this <BR/>is <BR/>a <BR/>test<BR/>. <BR/>this <BR/>is <BR/>a <BR/>test. </p>
  </div>
 </div>
 
 <div id="navigation">
 <ul>
  <li><a href="">Nav link 1</a></li>
  <li><a href="">Nav link 2</a></li>
  <li><a href="">Nav link 3</a></li>
  <li><a href="">Nav link 4</a></li>
  <li><a href="">Nav link 5</a></li>
 </ul>
 </div>
 
 <div id="related">
 <h2>Related Links</h2>
 <ul>
  <li><a href="">Related link</a></li>
  <li><a href="">Another link</a></li>
  <li><a href="">And another</a></li>
 </ul>
 </div>
 
 <div id="footer">Footer</div>
</div>
</body>
</html>

Header and three columns under

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title></title>
<style type="text/css">
  #leftcontent {
    position: absolute;
    left:10px;
    top:50px;
    width:200px;
    background:#fff;
    border:1px solid #000;
  }
  #centercontent {
    background:#fff;
       margin-left: 199px;
       margin-right:199px;
    border:1px solid #000;
       margin-left: 201px;
       margin-right:201px;
    }
  #rightcontent {
    position: absolute;
    right:10px;
    top:50px;
    width:200px;
    background:#fff;
    border:1px solid #000;
    }
  
  #banner {
    background:#fff;
    height:40px;
    border-top:1px solid #000;
    border-right:1px solid #000;
    border-left:1px solid #000;
    height:39px;
    }
  html>body #banner {
    height:39px;
  }
</style>
</head><body>
<div id="banner">This is a test. </h1></div>
<div id="leftcontent">
  <h1>leftcontent</h1>
  <p class="greek">
This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test.   </p>
</div>
<div id="centercontent">
  <h1>centercontent</h1>
  <p class="greek">This is a test. This is a test. This is a test. 
  This is a test. This is a test. This is a test. This is a test. 
  This is a test. This is a test. This is a test. This is a test. 
  This is a test. This is a test. This is a test. This is a test. 
  This is a test. This is a test. This is a test. This is a test.  
  </p>
  <br />
</div>
<div id="rightcontent">
  <h1>rightcontent</h1>
  This is a test. This is a test. This is a test. This is a test. 
  This is a test. This is a test. This is a test. This is a test. 
  This is a test. This is a test. This is a test. This is a test. 
  This is a test. This is a test. This is a test. This is a test.    
</div>
</body>
</html>

Three Column Design Using HTML with Table

 
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//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>
    <title>Three Column Design Using HTML</title>
    <style rel="stylesheet" type="text/css">
table {
  background-color: #ffffff;
  border-style: solid;
  border-width: 1px;
  border-color: #666666;
}
.header {
  background-color: #f3f3f3;
  padding: 3px;
}
.nav {
  font-weight: bold;
  background-color: #e3e3e3;
  padding: 5px;
}
.content {
  padding: 10px;
}
.rightColumn {
  font-weight: bold;
  background-color: #e3e3e3;
  padding: 5px;
  vertical-align: top;
}
</style>
  </head> 
  <body>
    <table width="800" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td class="header" colspan="3"><h1>My Company Name</h1></td>
      </tr>
      <tr>
         <td class="nav" valign="top" width="100">
         <a href="">Home</a><br /><a href="">Products</a><br /><a href="">Services</a><br /><a href="">About Us</a><br /><a href="">Contact Us</a>
        </td>
        <td class="content">
        <h2>Sample Web Page</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id 
            commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam 
            semper viverra nulla. Sed lacinia feugiat eros. Maecenas ullamcorper ligula quis odio. 
            Donec pede massa, pharetra sit amet, accumsan a, iaculis egestas, lectus. Etiam 
            ullamcorper elementum wisi. Etiam et felis aliquet dui tempus sagittis. Donec dapibus 
            ipsum id leo. Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. 
            Integer lobortis wisi id erat. Nullam aliquet augue ac elit. Nulla facilisi. Vivamus 
            ligula tortor, molestie at, accumsan quis, semper vitae, augue. Praesent pede neque, 
            sollicitudin non, facilisis sed, viverra a, pede. Cras nec urna. Curabitur ut metus. 
            Curabitur erat lacus, tempus vitae, elementum nec, pulvinar vel, leo. Sed a velit. 
            Proin erat. Donec sem. </p>

        </td>
        <td class="rightColumn">This right hand bar may contain additional links or info about the site or it may contain advertising.</td>
      </tr>
    </table>
  </body>
</html>

Three Column Elastic Layout

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three Col Elastic Layout</title>
<style type="text/css">
#branding {
  height: 50px;
  background-color:#b0b0b0;
  padding: 20px;
}
#branding h1 {
  margin: 0;
}
#mainNav {
  list-style: none;
  background-color:#eee;
}
#secondaryContent {
  background-color:#eee;
}
#footer {
  background-color:#b0b0b0;
  padding: 1px 20px;
}
#wrapper {
  width: 72em;
  margin: 0 auto; 
  text-align: left;
}
#mainNav { 
  width: 18em; 
  float: left; 
}
#content { 
  width: 52em; 
  float: right; 
}
#mainContent { 
  width: 32em; 
  float: left; 
}
#secondaryContent { 
  width: 18em;
  float: right; 
} 
#footer { 
  clear: both; 
} 

#mainNav, #secondaryContent {
  padding-top: 20px;
  padding-bottom: 20px;
}
#mainNav *, #secondaryContent * {
  padding-left: 20px;
  padding-right: 20px;
}
#mainNav * *, #secondaryContent * * {
  padding-left: 0;
  padding-right: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="branding">
<h1>Branding</h1>
</div> 
<div id="content"> 
<div id="mainContent">
<h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<h2>Ea commodo consequat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<h2>Magna aliquam erat volutpat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div> 
<div id="secondaryContent">
<h2>Magna aliquam erat volutpat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
</div>
<ul id="mainNav"> 
<li class="first"><a href="#">Home</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">News</a></li> 
<li><a href="#">Products</a></li> 
<li><a href="#">Services</a></li> 
<li><a href="#">Clients</a></li> 
<li><a href="#">Case Studies</a></li> 
</ul> 
<div id="footer">
<p>Footer</p>
</div>

</div>
</body>
</html>

Three Column Hybrid Layout

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three Col Hybrid Layout</title>
<style type="text/css">
body {
  background-color:#D4D4D4;
}
#wrapper {
  background-color: #fff;
}
#branding {
  height: 50px;
  background-color:#b0b0b0;
  padding: 20px;
}
#mainNav {
  list-style: none;
  background-color:#eee;
}
#secondaryContent {
  background-color:#eee;
}
#footer {
  background-color:#b0b0b0;
  padding: 1px 20px;
}
#wrapper {
  width: 72em;
  max-width: 100%; 
  margin: 0 auto; 
  text-align: left;
}
#mainNav { 
  width: 18em;
  max-width: 23%;
  float: left;
}
#content { 
  width: 52em;
  max-width: 75%; 
  float: right;
}
#mainContent { 
  width: 32em;
  max-width: 66%;
  float: left;
}
#secondaryContent { 
  width: 18em;
  max-width: 31%;
  float: right;
} 
#footer { 
  clear: both; 
} 
#mainNav, #secondaryContent {
  padding-top: 20px;
  padding-bottom: 20px;
}
#mainNav *, #secondaryContent * {
  padding-left: 20px;
  padding-right: 20px;
}
#mainNav * *, #secondaryContent * * {
  padding-left: 0;
  padding-right: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="branding">
<h1>Branding</h1>
</div> 
<div id="content"> 
<div id="mainContent">
<h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<h2>Ea commodo consequat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<h2>Magna aliquam erat volutpat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div> 
<div id="secondaryContent">
<h2>Magna aliquam erat volutpat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
</div>
<ul id="mainNav"> 
<li class="first"><a href="#">Home</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">News</a></li> 
<li><a href="#">Products</a></li> 
<li><a href="#">Services</a></li> 
<li><a href="#">Clients</a></li> 
<li><a href="#">Case Studies</a></li> 
</ul> 
<div id="footer">
<p>Footer</p>
</div>

</div>
</body>
</html>

Three-Column Layout Demonstration with fixed width

 
<!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">
<head>
<title>Three-Column Layout Demonstration</title>
<meta http-equiv="Content-Type"
  content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
#top {
  margin: 20px;
  padding: 10px;
  background: #ccc;
  height: 100px;
}
#wrapper {
  margin: 0 10px;
  padding: 0;
}
#left {
  float: left;
  width: 200px;
}
#right {
  float: right;
  width: 200px;
}
#center {
  margin-left: 210px;
  margin-right: 210px;
  background-color: #ccc;
}
#clear {
  clear: both;
}
#footer {
  background: #ccc;
  margin: 20px;
  text-align: center;
}
div > p {
  margin-top: 0;
}
</style>
</head>
<body>
<div id="top">
  <h1>
    This is the header
  </h1>
</div>
<div id="wrapper">
  <div id="left">
    <p>on the page. </p>
  </div>
  <div id="right">
    <p>two columns. </p>
  </div>
  <div id="center">
    <p>first.</p>
    <p>spacing.</p>
  </div>
  <div id="clear"></div>
</div>
<div id="footer">
  <p>
    This footer should float below the three columns.
  </p>
</div>
</body>
</html>

Three-Column Layout Demonstration with Javascript

 
<!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">
<head>
<title>Three-Column Layout Demonstration</title>
<meta http-equiv="Content-Type"
  content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
#top {
  margin: 20px;
  padding: 10px;
  background: #ccc;
  height: 100px;
}
#left {
  position: absolute;
  left: 10px;
  top: 160px;
  width: 200px;
}
#center {
  margin-left: 220px;
  margin-right: 220px;
  background: #ccc;
}
#right {
  position: absolute;
  right: 10px;
  top: 160px;
  width: 200px;
}
#footer {
  background: #ccc;
  margin: 20px;
  text-align: center;
  visibility: hidden;
}
div > p {
  margin-top: 0;
}
</style>
<script type="text/javascript">
// x.js
// X v3.10, Cross-Browser DHTML Library from Cross-Browser.ru
// Copyright (c) 2002,2003 Michael Foster (mike@cross-browser.ru)
// This library is distributed under the terms of the LGPL (gnu.org)
// Variables:
var xVersion="3.10",xOp7=false,xOp5or6=false,xIE4Up=false,xNN4=false,xUA=navigator.userAgent.toLowerCase();
if(window.opera){
  xOp7=(xUA.indexOf("opera 7")!=-1 || xUA.indexOf("opera/7")!=-1);
  if (!xOp7) xOp5or6=(xUA.indexOf("opera 5")!=-1 || xUA.indexOf("opera/5")!=-1 || xUA.indexOf("opera 6")!=-1 || xUA.indexOf("opera/6")!=-1);
}
else if(document.layers) xNN4=true;
else {xIE4Up=document.all && xUA.indexOf("msie")!=-1 && parseInt(navigator.appVersion)>=4;}
// Appearance:
function xShow(e) {
  if(!(e=xGetElementById(e))) return;
  if(e.style && xDef(e.style.visibility)) e.style.visibility="inherit";
  else if(xDef(e.visibility)) e.visibility="show";
}
function xHide(e) {
  if(!(e=xGetElementById(e))) return;
  if(e.style && xDef(e.style.visibility)) e.style.visibility="hidden";
  else if(xDef(e.visibility)) e.visibility="hide";
}
function xZIndex(e,uZ) {
  if(!(e=xGetElementById(e))) return 0;
  if(e.style && xDef(e.style.zIndex)) {
    if(arguments.length>1) e.style.zIndex=uZ;
    else uZ=e.style.zIndex;
  }
  else if(xDef(e.zIndex)) {
    if(arguments.length>1) e.zIndex=uZ;
    else uZ=e.zIndex;
  }
  return uZ;
}
function xColor(e,sColor) {
  if(!(e=xGetElementById(e))) return "";
  var c="";
  if(e.style && xDef(e.style.color)) {
    if(arguments.length>1) e.style.color=sColor;
    c=e.style.color;
  }
  return c;
}
function xBackground(e,sColor,sImage) {
  if(!(e=xGetElementById(e))) return "";
  var bg="";
  if(e.style) {
    if(arguments.length>1) e.style.backgroundColor=sColor;
    if(arguments.length==3) e.style.backgroundImage=(sImage && sImage!="")? "url("+sImage+")" : null;
    bg=e.style.backgroundColor;
  }
  else if(xDef(e.bgColor)) {
    if(arguments.length>1) e.bgColor=sColor;
    bg=e.bgColor;
    if(arguments.length==3) e.background.src=sImage;
  }
  return bg;
}
// Position:
function xMoveTo(e,iX,iY) {
  xLeft(e,iX);
  xTop(e,iY);
}
function xLeft(e,iX) {
  if(!(e=xGetElementById(e))) return 0;
  var css=xDef(e.style);
  if (css && xDef(e.style.left) && typeof(e.style.left)=="string") {
    if(arguments.length>1) e.style.left=iX+"px";
    else {
      iX=parseInt(e.style.left);
      if(isNaN(iX)) iX=0;
    }
  }
  else if(css && xDef(e.style.pixelLeft)) {
    if(arguments.length>1) e.style.pixelLeft=iX;
    else iX=e.style.pixelLeft;
  }
  else if(xDef(e.left)) {
    if(arguments.length>1) e.left=iX;
    else iX=e.left;
  }
  return iX;
}
function xTop(e,iY) {
  if(!(e=xGetElementById(e))) return 0;
  var css=xDef(e.style);
  if(css && xDef(e.style.top) && typeof(e.style.top)=="string") {
    if(arguments.length>1) e.style.top=iY+"px";
    else {
      iY=parseInt(e.style.top);
      if(isNaN(iY)) iY=0;
    }
  }
  else if(css && xDef(e.style.pixelTop)) {
    if(arguments.length>1) e.style.pixelTop=iY;
    else iY=e.style.pixelTop;
  }
  else if(xDef(e.top)) {
    if(arguments.length>1) e.top=iY;
    else iY=e.top;
  }
  return iY;
}
function xPageX(e) {
  if (!(e=xGetElementById(e))) return 0;
  if (xDef(e.pageX)) return e.pageX;
  var x = 0;
  while (e) {
    if (xDef(e.offsetLeft)) x += e.offsetLeft;
    e = xParent(e);
  }
  return x;
}
function xPageY(e) {
  if (!(e=xGetElementById(e))) return 0;
  if (xDef(e.pageY)) return e.pageY;
  var y = 0;
  while (e) {
    if (xDef(e.offsetTop)) y += e.offsetTop;
    e = xParent(e);
  }
  return y;
}
function xSlideTo(e,x,y,uTime) {
  if (!(e=xGetElementById(e))) return;
  if (!e.timeout) e.timeout = 25;
  e.xTarget = x; e.yTarget = y; e.slideTime = uTime; e.stop = false;
  e.yA = e.yTarget - xTop(e); e.xA = e.xTarget - xLeft(e); // A = distance
  e.B = Math.PI / (2 * e.slideTime); // B = period
  e.yD = xTop(e); e.xD = xLeft(e); // D = initial position
  var d = new Date(); e.C = d.getTime();
  if (!e.moving) xSlide(e);
}
function xSlide(e) {
  if (!(e=xGetElementById(e))) return;
  var now, s, t, newY, newX;
  now = new Date();
  t = now.getTime() - e.C;
  if (e.stop) { e.moving = false; }
  else if (t < e.slideTime) {
    setTimeout("xSlide(""+e.id+"")", e.timeout);
    s = Math.sin(e.B * t);
    newX = Math.round(e.xA * s + e.xD);
    newY = Math.round(e.yA * s + e.yD);
    xMoveTo(e, newX, newY);
    e.moving = true;
  }  
  else {
    xMoveTo(e, e.xTarget, e.yTarget);
    e.moving = false;
  }  
}
// Size:
function xResizeTo(e,uW,uH) {
  xWidth(e,uW);
  xHeight(e,uH);
}
function xWidth(e,uW) {
  if(!(e=xGetElementById(e)) || (uW && uW<0)) return 0;
  uW=Math.round(uW);
  var css=xDef(e.style);
  if(css && xDef(e.style.width,e.offsetWidth) && typeof(e.style.width)=="string") {
    if(arguments.length>1) xSetCW(e, uW);
    uW=e.offsetWidth;
  }
  else if(css && xDef(e.style.pixelWidth)) {
    if(arguments.length>1) e.style.pixelWidth=uW;
    uW=e.style.pixelWidth;
  }
  else if(xDef(e.clip) && xDef(e.clip.right)) {
    if(arguments.length>1) e.clip.right=uW;
    uW=e.clip.right;
  }
  return uW;
}
function xHeight(e,uH) {
  if(!(e=xGetElementById(e)) || (uH && uH<0)) return 0;
  uH=Math.round(uH);
  var css=xDef(e.style);
  if(css && xDef(e.style.height,e.offsetHeight) && typeof(e.style.height)=="string") {
    if(arguments.length>1) xSetCH(e, uH);
    uH=e.offsetHeight;
  }
  else if(css && xDef(e.style.pixelHeight)) {
    if(arguments.length>1) e.style.pixelHeight=uH;
    uH=e.style.pixelHeight;
  }
  else if(xDef(e.clip) && xDef(e.clip.bottom)) {
    if(arguments.length>1) e.clip.bottom=uH;
    uH=e.clip.bottom;
  }
  return uH;
}
// thank moz for the next 2000 bytes
function xGetCS(ele,sP){return parseInt(document.defaultView.getComputedStyle(ele,"").getPropertyValue(sP));}
function xSetCW(ele,uW){
  if(uW<0) return;
  var pl=0,pr=0,bl=0,br=0;
  if(xDef(document.defaultView) && xDef(document.defaultView.getComputedStyle)){
    pl=xGetCS(ele,"padding-left");
    pr=xGetCS(ele,"padding-right");
    bl=xGetCS(ele,"border-left-width");
    br=xGetCS(ele,"border-right-width");
  }
  else if(xDef(ele.currentStyle,document.rupatMode)){
    if(document.rupatMode=="CSS1Compat"){
      pl=parseInt(ele.currentStyle.paddingLeft);
      pr=parseInt(ele.currentStyle.paddingRight);
      bl=parseInt(ele.currentStyle.borderLeftWidth);
      br=parseInt(ele.currentStyle.borderRightWidth);
    }
  }
  else if(xDef(ele.offsetWidth,ele.style.width)){
    ele.style.width=uW+"px";
    pl=ele.offsetWidth-uW;
  }
  if(isNaN(pl)) pl=0; if(isNaN(pr)) pr=0; if(isNaN(bl)) bl=0; if(isNaN(br)) br=0;
  var cssW=uW-(pl+pr+bl+br);
  if(isNaN(cssW)||cssW<0) return;
  else ele.style.width=cssW+"px";
}
function xSetCH(ele,uH){
  if(uH<0) return;
  var pt=0,pb=0,bt=0,bb=0;
  if(xDef(document.defaultView) && xDef(document.defaultView.getComputedStyle)){
    pt=xGetCS(ele,"padding-top");
    pb=xGetCS(ele,"padding-bottom");
    bt=xGetCS(ele,"border-top-width");
    bb=xGetCS(ele,"border-bottom-width");
  }
  else if(xDef(ele.currentStyle,document.rupatMode)){
    if(document.rupatMode=="CSS1Compat"){
      pt=parseInt(ele.currentStyle.paddingTop);
      pb=parseInt(ele.currentStyle.paddingBottom);
      bt=parseInt(ele.currentStyle.borderTopWidth);
      bb=parseInt(ele.currentStyle.borderBottomWidth);
    }
  }
  else if(xDef(ele.offsetHeight,ele.style.height)){
    ele.style.height=uH+"px";
    pt=ele.offsetHeight-uH;
  }
  if(isNaN(pt)) pt=0; if(isNaN(pb)) pb=0; if(isNaN(bt)) bt=0; if(isNaN(bb)) bb=0;
  var cssH=uH-(pt+pb+bt+bb);
  if(isNaN(cssH)||cssH<0) return;
  else ele.style.height=cssH+"px";
}
function xClip(e,iTop,iRight,iBottom,iLeft) {
  if(!(e=xGetElementById(e))) return;
  if(e.style) {
    if (arguments.length == 5) e.style.clip="rect("+iTop+"px "+iRight+"px "+iBottom+"px "+iLeft+"px)";
    else e.style.clip="rect(0 "+parseInt(e.style.width)+"px "+parseInt(e.style.height)+"px 0)";
  }
  else if(e.clip) {
    if (arguments.length == 5) { e.clip.top=iTop; e.clip.right=iRight; e.clip.bottom=iBottom; e.clip.left=iLeft; }
    else { e.clip.top=0; e.clip.right=xWidth(e); e.clip.bottom=xHeight(e); e.clip.left=0; }
  }
}
// Event:
function xAddEventListener(e,eventType,eventListener,useCapture) {
  if(!(e=xGetElementById(e))) return;
  eventType=eventType.toLowerCase();
  if((!xIE4Up && !xOp7) && e==window) {
    if(eventType=="resize") { window.xPCW=xClientWidth(); window.xPCH=xClientHeight(); window.xREL=eventListener; xResizeEvent(); return; }
    if(eventType=="scroll") { window.xPSL=xScrollLeft(); window.xPST=xScrollTop(); window.xSEL=eventListener; xScrollEvent(); return; }
  }
  var eh="e.on"+eventType+"=eventListener";
  if(e.addEventListener) e.addEventListener(eventType,eventListener,useCapture);
  else if(e.attachEvent) e.attachEvent("on"+eventType,eventListener);
  else if(e.captureEvents) {
    if(useCapture||(eventType.indexOf("mousemove")!=-1)) { e.captureEvents(eval("Event."+eventType.toUpperCase())); }
    eval(eh);
  }
  else eval(eh);
}
function xRemoveEventListener(e,eventType,eventListener,useCapture) {
  if(!(e=xGetElementById(e))) return;
  eventType=eventType.toLowerCase();
  if((!xIE4Up && !xOp7) && e==window) {
    if(eventType=="resize") { window.xREL=null; return; }
    if(eventType=="scroll") { window.xSEL=null; return; }
  }
  var eh="e.on"+eventType+"=null";
  if(e.removeEventListener) e.removeEventListener(eventType,eventListener,useCapture);
  else if(e.detachEvent) e.detachEvent("on"+eventType,eventListener);
  else if(e.releaseEvents) {
    if(useCapture||(eventType.indexOf("mousemove")!=-1)) { e.releaseEvents(eval("Event."+eventType.toUpperCase())); }
    eval(eh);
  }
  else eval(eh);
}
function xEvent(evt) { // cross-browser event object prototype
  this.type = "";
  this.target = null;
  this.pageX = 0;
  this.pageY = 0;
  this.offsetX = 0;
  this.offsetY = 0;
  this.keyCode = 0;
  var e = evt ? evt : window.event;
  if(!e) return;
  // type
  if(e.type) this.type = e.type;
  // target
  if(xNN4) this.target = xLayerFromPoint(e.pageX, e.pageY);
  else if(e.target) this.target = e.target;
  else if(e.srcElement) this.target = e.srcElement;
  // pageX, pageY
  if(xOp5or6) { this.pageX = e.clientX; this.pageY = e.clientY; }
  else if(xDef(e.pageX,e.pageY)) { this.pageX = e.pageX; this.pageY = e.pageY; }
  else if(xDef(e.clientX,e.clientY)) { this.pageX = e.clientX + xScrollLeft(); this.pageY = e.clientY + xScrollTop(); }
  // offsetX, offsetY
  if(xDef(e.layerX,e.layerY)) { this.offsetX = e.layerX; this.offsetY = e.layerY; }
  else if(xDef(e.offsetX,e.offsetY)) { this.offsetX = e.offsetX; this.offsetY = e.offsetY; }
  else { this.offsetX = this.pageX - xPageX(this.target); this.offsetY = this.pageY - xPageY(this.target); }
  // keycode
  if (xDef(e.keyCode)) { this.keyCode = e.keyCode; }
  else if (xDef(e.which)) { this.keyCode = e.which; }
}
function xResizeEvent() { // window resize event simulation
  if (window.xREL) setTimeout("xResizeEvent()", 250);
  var cw = xClientWidth(), ch = xClientHeight();
  if (window.xPCW != cw || window.xPCH != ch) { window.xPCW = cw; window.xPCH = ch; if (window.xREL) window.xREL(); }
}
function xScrollEvent() { // window scroll event simulation
  if (window.xSEL) setTimeout("xScrollEvent()", 250);
  var sl = xScrollLeft(), st = xScrollTop();
  if (window.xPSL != sl || window.xPST != st) { window.xPSL = sl; window.xPST = st; if (window.xSEL) window.xSEL(); }
}
// Object:
function xGetElementById(e) {
  if(typeof(e)!="string") return e;
  if(document.getElementById) e=document.getElementById(e);
  else if(document.all) e=document.all[e];
  else if(document.layers) e=xLayer(e);
  else e=null;
  return e;
}
function xLayer(id,root) { // only for nn4
  var i,layer,found=null;
  if (!root) root=window;
  for(i=0; i<root.document.layers.length; i++) {
    layer=root.document.layers[i];
    if(layer.id==id) return layer;
    if(layer.document.layers.length) found=xLayer(id,layer);
    if(found) return found;
  }
  return null;
}
function xLayerFromPoint(x,y,root) { // only for nn4
  var i, hn=null, hz=-1, cn;
  if (!root) root = window;
  for (i=0; i < root.document.layers.length; ++i) {
    cn = root.document.layers[i];
    if (cn.visibility != "hide" && x >= cn.pageX && x <= cn.pageX + cn.clip.right && y >= cn.pageY && y <= cn.pageY + cn.clip.bottom ) {
      if (cn.zIndex > hz) { hz = cn.zIndex; hn = cn; }
    }
  }
  if (hn) {
    cn = xLayerFromPoint(x,y,hn);
    if (cn) hn = cn;
  }
  return hn;
}
function xParent(e){
  if (!(e=xGetElementById(e))) return null;
  var p=null;
  if (e.parentLayer){if (e.parentLayer!=window) p=e.parentLayer;}
  else{
    if (e.offsetParent) p=e.offsetParent;
    else if (e.parentNode) p=e.parentNode;
    else if (e.parentElement) p=e.parentElement;
  }
  return p;
}
function xDef() {
  for(var i=0; i<arguments.length; ++i){if(typeof(arguments[i])=="" || typeof(arguments[i])=="undefined") return false;}
  return true;
}
// Window:
function xScrollLeft() {
  var offset=0;
  if(xDef(window.pageXOffset)) offset=window.pageXOffset;
  else if(document.documentElement && document.documentElement.scrollLeft) offset=document.documentElement.scrollLeft;
  else if(document.body && xDef(document.body.scrollLeft)) offset=document.body.scrollLeft;
  return offset;
}
function xScrollTop() {
  var offset=0;
  if(xDef(window.pageYOffset)) offset=window.pageYOffset;
  else if(document.documentElement && document.documentElement.scrollTop) offset=document.documentElement.scrollTop;
  else if(document.body && xDef(document.body.scrollTop)) offset=document.body.scrollTop;
  return offset;
}
function xClientWidth() {
  var w=0;
  if(xOp5or6) w=window.innerWidth;
  else if(xIE4Up && document.documentElement && document.documentElement.clientWidth)
    w=document.documentElement.clientWidth;
  else if(document.body && document.body.clientWidth)
    w=document.body.clientWidth;
  else if(xDef(window.innerWidth,window.innerHeight,document.height)) {
    w=window.innerWidth;
    if(document.height>window.innerHeight) w-=16;
  }
  return w;
}
function xClientHeight() {
  var h=0;
  if(xOp5or6) h=window.innerHeight;
  else if(xIE4Up && document.documentElement && document.documentElement.clientHeight)
    h=document.documentElement.clientHeight;
  else if(document.body && document.body.clientHeight)
    h=document.body.clientHeight;
  else if(xDef(window.innerWidth,window.innerHeight,document.width)) {
    h=window.innerHeight;
    if(document.width>window.innerWidth) h-=16;
  }
  return h;
}
// end x.js
</script>
<script type="text/javascript">
function adjustLayout()
{
  // Get natural heights
  var cHeight = xHeight("centercontent");
  var lHeight = xHeight("leftcontent");
  var rHeight = xHeight("rightcontent");
  
  // Find the maximum height
  var maxHeight = Math.max(cHeight, Math.max(lHeight, rHeight));
  
  // Assign maximum height to all columns
  xHeight("center", maxHeight);
  xHeight("left", maxHeight);
  xHeight("right", maxHeight);
  
  // Show the footer
  xShow("footer");
}
window.onload = function()
{
  xAddEventListener(window, "resize", adjustLayout, false);
  adjustLayout();
}
</script>
</head>
<body>
  <div id="top">
    <h1>
      This is the header area of the three column plus header
      layout
    </h1>
  </div>
  <div id="left">
    <div id="leftcontent">
      <p>
        This is quite straight-forward. Using absolute positioning,
        this column has its upper left corner placed 10 pixels down
        from the top of the document area of the browser and 10
        pixels to the right of the left margin of that space. It
        sets a fixed width for the column, though as we will see,
        you could supply a relative value (such as a percentage) to
        create a stretchy layout that would keep the left column"s
        width proportional to the document area"s width.
      </p>
    </div>
  </div>
  <div id="center">
    <div id="centercontent">
      <p>
        Notice that this column is not able to be positioned. Its
        position will thus retain its "natural" place based on its
        location in the HTML file that generates the page. Margin
        settings ensure that the left and right columns (which are
        set to 200 pixels in width) will have room for their content
        without creating a visible space between any of the
        adjoining columns.
      </p>
    </div>
  </div>
  <div id="right">
    <div id="rightcontent">
      <p>
        The right-hand column is so much like the left-hand column
        that it seems unworthy of comment.
      </p>
    </div>
  </div>
  <div id="footer">
    <p>
      This footer should float below the three columns.
  </p>
  </div>
</body>
</html>

Three Column Layout in CSS

 
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//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>
    <title>Three Column Layout in CSS</title>
    <style rel="stylesheet" type="text/css">
body {
  background-color: #efefef;
  font-family: arial, verdana, sans-serif;
  margin: 0;
  padding: 0;
}
.header {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  background-color: #f3f3f3;
  height: 60px;
}
.nav {
  position: absolute;
  left: 0px;
  top: 60px;
  width: 100px;
  font-weight: bold;
  background-color: #e3e3e3;
  padding: 5px;
  height: 30em;
}
.content {
  padding-top: 40px;
  margin-left: 208px;
  margin-right: 208px;
  voice-family: inherit;
  margin-left: 205px;
  margin-right: 205px;
}
html>body .content {
  margin-left: 205px;
  margin-right: 205px;
}
.right {
  position: absolute;
  right: 0px;
  top: 60px;
  font-weight: bold;
  background-color: #e3e3e3;
  padding: 5px;
  width: 100px;
}
</style>
  </head> 
  <body leftmargin="0" topmargin="0">
      <div class="header"><h2>My Company Name</h2></div>
      <div class="nav">
        <a href="">Home</a><br /><a href="">Products</a><br /><a href="">Services</a><br /><a href="">About Us</a><br /><a href="">Contact Us</a>
      </div>
      <div class="right">This is the third column with some content here. </div>
      <div class="content">
        <h2>Sample Web Page</h2>
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id 
           commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam 
           semper viverra nulla. Sed lacinia feugiat eros. Maecenas ullamcorper ligula quis odio. 
           Donec pede massa, pharetra sit amet, accumsan a, iaculis egestas, lectus. Etiam 
           ullamcorper elementum wisi. Etiam et felis aliquet dui tempus sagittis. Donec dapibus 
           ipsum id leo. Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. 
           Integer lobortis wisi id erat. Nullam aliquet augue ac elit. Nulla facilisi. Vivamus 
           ligula tortor, molestie at, accumsan quis, semper vitae, augue. Praesent pede neque, 
           sollicitudin non, facilisis sed, viverra a, pede. Cras nec urna. Curabitur ut metus. 
           Curabitur erat lacus, tempus vitae, elementum nec, pulvinar vel, leo. Sed a velit. 
           Proin erat. Donec sem. </p>
      </div>
  </body>
</html>

Three-Column Layout with absolute position

 

<!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">
<head>
<title>Three-Column Layout Demonstration</title>
<meta http-equiv="Content-Type"
  content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
#left {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 200px;
}
#center {
  margin-left: 220px;
  margin-right: 220px;
}
#right {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 200px;
}
</style>
</head>
<body>
  <div id="left">
    <p>
left
    </p>
  </div>
  <div id="center">
    <p>
center
    </p>
  </div>
  <div id="right">
    <p>
right
    </p>
  </div>
</body>
</html>

three column layout with header and footer

 
<html>
<head>
<style>
div#masthead, div#main {
width: 800px;
}
div#masthead img {
vertical-align: bottom;
}
div#nav {
float: left;
width: 140px;
}
div#expertlist {
float: right;
width: 160px;
}
div#expertlist {
border: 1px solid #467CC2;
border-bottom-width: 10px;
margin: 40px 40px 0 0;
}
div#content {
margin: 0 200px 0 145px;
}
div#credits {
width: 788px;
}
</style>
</head>
<body>
<div id="masthead">header header header header header </div>
<div id="main">
<div id="nav">navigation. navigation. navigation. navigation. </div>
<div id="expertlist">expertlist</div>
<div id="content">
this is a test. this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. 
<div id="bottomlinks">this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. 
</div>
</div>
<div id="credits">this is a test. this is a test. this is a test. </div>
</div>
</body>
</html>

Three-Column Layout without footer

 
<!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">
<head>
<title>Three-Column Layout Demonstration</title>
<meta http-equiv="Content-Type"
  content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
#top {
  margin: 20px;
  padding: 10px;
  background: #ccc;
  height: 100px;
}
#left {
  position: absolute;
  left: 10px;
  top: 170px;
  width: 200px;
}
#center {
  background: #ccc;
  margin-top: 0;
  margin-left: 220px;
  margin-right: 220px;
}
#right {
  position: absolute;
  right: 10px;
  top: 170px;
  width: 200px;
}
div > p {
  margin-top: 0;
}
</style>
</head>
<body>
  <div id="top">
    <h1>
      This is the header area of the three column plus header
      layout
    </h1>
  </div>
  <div id="left">
    <p>
          This is a test. This is a test. 
    </p>
  </div>
  <div id="center">
    <p>
           This is a test. This is a test. 
    </p>
  </div>
  <div id="right">
    <p>
           This is a test. This is a test. 
    </p>
  </div>
</body>
</html>

Three column layout with sub sections

 
Fluid Layout 
<!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">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
* .float-divider {
  clear: both;
  display: block;
  background: pink;
  height: 10px;
  font-size: 10px;
  line-height: 10px;
}
* .subSection1 {
  background-color: red;
  margin: 0;
  padding: 5px;
}
* .subSection2 {
  background-color: gold;
  margin: 5px;
  padding: 5px;
}
* .subSection3 {
  background-color: yellow;
  margin: 5px;
  padding: 5px;
}
#main {
  max-width: 700px;
}
#leftBar {
  float: left;
  width: 20%;
  min-width: 75px;
}
#content {
  float: left;
  width: 60%;
  min-width: 150px;
}
#rightBar {
  float: left;
  width: 20%;
  min-width: 115px;
}
#leftBar * .subSection2 {
  min-height: 43px;
}
#content * .subSection3 {
  display: block;
}
#head {
  float: left;
  width: 35%;
  min-width: 75px;
}
#detail {
  float: left;
  width: 65%;
  min-width: 75px;
}
</style>
</head>
<body>
<div id="main">
   <div class="subSection1"> 
      <h2>main - 100%</h2> 
      <div id="leftBar">
          <div class="subSection2"> 
              <h3>leftBar -20%</h3> 
          </div>
      </div> 
      <div id="content">
          <div class="subSection2"> 
              <h3>content - 60%</h3> 
                  <span id="head">
                      <span class="subSection3"> 
                           <em>head - 35%</em> 
                      </span>
                  </span> 
                  <span id="detail">
                      <span class="subSection3"> 
                           <em>detail - 65%</em> 
                      </span>
                  </span> 
                  <span class="float-divider">divider</span>
          </div>
      </div> 
     <div id="rightBar">
          <div class="subSection2"> 
               <h3>rightBar -20%</h3> 
          </div>
     </div> 
     <div class="float-divider">divider</div>
   </div>
</div> 

</body>
</html>

Three Column Liquid Layout

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#branding {
  height: 50px;
  background-color:#b0b0b0;
  padding: 20px;
}
#mainNav {
  list-style: none;
  background-color:#eee;
}
#secondaryContent {
  background-color:#eee;
}
#footer {
  background-color:#b0b0b0;
  padding: 1px 20px;
}
body {
  min-width: 760px;
}
#wrapper {
  width: 100%; 
  margin: 0 auto; 
}
#mainNav { 
  width: 20%;
  float: left;
}
#content { 
  width: 75%; 
  float: right; 
}
#mainContent { 
  width: 66%; 
  margin: 0; 
  float: left; 
} 
#secondaryContent { 
  width: 31%;
  min-width: 10em;
  display: inline;
  float: right; 
} 
#footer { 
  clear: both; 
}
#mainNav, #secondaryContent {
  padding-top: 20px;
  padding-bottom: 20px;
}
#mainNav *, #secondaryContent * { 
 padding-left: 20px;
 padding-right: 20px;
}
#mainNav * *, #secondaryContent * * { 
 padding-left: 0;
 padding-right: 0;
}

</style>
</head>
<body>
<div id="wrapper">
<div id="branding">
<h1>Branding</h1>
</div> 
<div id="content"> 
<div id="mainContent">
<h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<h2>Ea commodo consequat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<h2>Magna aliquam erat volutpat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div> 
<div id="secondaryContent">
<h2>Magna aliquam erat volutpat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
</div>
<ul id="mainNav"> 
<li class="first"><a href="#">Home</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">News</a></li> 
<li><a href="#">Products</a></li> 
<li><a href="#">Services</a></li> 
<li><a href="#">Clients</a></li> 
<li><a href="#">Case Studies</a></li> 
</ul> 
<div id="footer">
<p>Footer</p>
</div>

</div>
</body>
</html>

Three columns: all floating from left

 
<html><head>
  <title></title>
<style type="text/css">
#columnRight {
  width: 33%;
  float: left;
  background: #fff;
  padding-bottom: 1em;
}
#columnMain {
  width:47%;
  float: left;
  background: #fff;
  padding-bottom: 1em;
}
#columnLeft {
  width: 20%;
  float: left;
  background: #fff;
  padding-bottom: 1em;
  text-align: justify;
}
#footer {
  clear: both;
  padding-bottom: 1em;
  border-top: 1px solid #333;
  text-align: center;
}
</style>
</head><body>
<div id="header">
  <h1>Main Title</h1>
</div>
<div id="columnLeft">
  <h2>Left Column</h2>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<div id="navsite">
<h5>Site navigation:</h5>
<ul>
    <li><a href="" id="current">Home</a></li>
    <li><a href="">Products</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">About Us</a></li>
    <li><a href="">Contact</a></li>
</ul>
</div>
</div>
<div id="columnMain">
  <h2>Main Column</h2>
  <p>Text Text Text Text Text Text Text Text Text Text Text Text </p>
    <p>Text Text Text Text Text Text Text Text Text Text Text Text .</p>
</div>
<div id="columnRight">
  <h2>Right Column</h2>
    <p>Text Text Text Text Text Text Text Text Text Text Text Text .</p>
</div>
  <div id="footer">
    <p>Copyright 2003 </p>
  </div>
</body>
</html>

Three columns, left and right column has abolute position

 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
#left {
  position: absolute;
  top: 0px;
  left: 0px;
  margin: 5px;
  padding: 10px;
  border: 1px solid #000;
  background-color: #fff;
  width: 90px;
}
#middle {
  margin: 5px 122px 5px 122px;
  padding: 10px;
  border: 1px solid #000;
  background-color: #fff;
}
#right {
  position: absolute;
  top: 0px;
  right: 0px;
  margin: 5px;
  padding: 10px;
  border: 1px solid #000;
  background-color: #fff;
  width: 90px;
}
  </style>
</head>
<body>
  <div id="left">
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  </div>
  <div id="middle">
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  </div>
  <div id="right">
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  </div>
</body>

</html>

Three columns with header and footer

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>positioning</title>
        <style rel="stylesheet" type="text/css">
h1, div#footer {
    position: absolute;
    right: 0;
    left: 0;
    margin: 0;
    padding: 5px;
    height: 20px;
}
div#footer {
    bottom: 0;
    font-size: 14px;
    border: 1px solid red;
}
h1 {
    top: 0;
    right: 0;
    left: 0;
    border: 1px solid blue;
}
div#left, div#right {
    position: absolute;
    top: 31px;
    bottom: 31px;
    width: 200px;
    padding: 5px;
}
div#left {
    left: 0;
    border-right: 1px solid black;
}
div#right {
    right: 0;
    border-left: 1px solid gold;
}
div#container {
    position: absolute;
    top: 31px;
    right: 211px;
    bottom: 31px;
    left: 211px;
    overflow: auto;
    padding: 0 10px;
    line-height: 2em;
}
        </style>
    </head>
    <body>
        <h1>A Fixed Heading</h1>
        <div id="left">
            Left side column.
        </div>
        <div id="right">
            Right side column.
        </div>
        <div id="container">
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu
                Aenean dictum dolor ut sem.
            </p>
            <p>
                Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel
                conubia nostra, per inceptos hymenaeos.
            </p>
        </div>
        <div id="footer">
            <p>
                A fixed footer.
            </p>
        </div>
    </body>
</html>

Three columns with navigation on the right

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#frame {
 margin-left: 20px;
 width: 710px;
}
#columnMain {
 float: right;
 width: 380px;
}
#columnLeft {
 float: left;
 width: 150px;
}
#columnRight {
 float: right;
 width: 120px;
}
#enclose {
 float:left;
 width:560px;
}
#footer {
 clear: both;
 padding-top: 1em;
 text-align: center;
}
</style>
</head>
<body>
  <div id="frame">
    <div id="header">
      <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h1>
    </div>
    <div id="enclose">
      <div id="columnMain">
<p>This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. 
</p>
      </div>
      <div id="columnLeft">
<p>This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. 
</p>
      
      </div>
</div>
      <div id="columnRight">
    
        <h3>Navigation</h3>
        <ul>
          <li><a href="">Q</a></li>
          <li><a href="">N</a></li>
          <li><a href="">C</a></li>
          
          <li><a href="">D</a></li>
          <li><a href="">R</a></li>
        </ul>
      </div>
      <div id="footer">
        <p>Proin at eros non eros adipiscing mollis.</p>
      </div>
    </div>
</body>
</html>

Three columns with no header and footer

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>positioning</title>
        <style rel="stylesheet" type="text/css">
div#left, div#right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 200px;
    padding: 5px;
}
div#left {
    left: 0;
    border-right: 1px solid black;
}
div#right {
    right: 0;
    border-left: 1px solid red;
}
div#container {
    position: absolute;
    top: 0;
    right: 211px;
    bottom: 0;
    left: 211px;
    overflow: auto;
    padding: 0 10px;
    line-height: 2em;
}
        </style>
    </head>
    <body>
        <div id="left">
            Left side column.
        </div>
        <div id="right">
            Right side column.
        </div>
        <div id="container">
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu
                Aenean dictum dolor ut sem.
            </p>
            <p>
                Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel
                conubia nostra, per inceptos hymenaeos.
            </p>
        </div>
    </body>
</html>

Top and left navigational bar and three columns

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>CSS Positioning Example</title>
  <style rel="stylesheet" type="text/css">
body {
  color: #333;
  margin: 0px;
  padding: 0px;
  background-color: #ccc;
}
#page {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 800px;
  background-color: #fff;
}
#masthead {
  border-bottom: 1px solid #ccc;
}
#topNav {
  border-bottom: 1px solid #ccd;
  padding: 5px;
  background-color: #e7e;
}
#topNav a:link,#topNav a:visited {
  padding: 0px 5px 0px 5px;
}
#sideNav {
  float: left;
  width: 150px;
  background-color: #F5f;
  border-bottom: 1px solid #ccc;
}
#sideRight {
  float: right;
  width: 150px;
  background-color: #F5f7f7;
  border-bottom: 1px solid #ccc;
}
#content {
  margin: 0px 150px 0px 150px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
#footer {
  clear: both;
  border-top: 1px solid #ccc;
  padding: 10px;
}
.item {
  padding: 10px;
  min-height: 75px;
  height: 75px;
}
#search {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 100;
}
#sideNav a:link,#sideNav a:visited {
  display: block;
  padding: 5px;
}
#sideNav a:hover {
  background-color: red;
}
</style>
</head>
<body> 
<div id="page"> 
  <div id="masthead"> 
    <h2>Masthead</h2> 
  </div> 
  <div id="topNav"> 
    <a href="#">Top link one</a>
    <a href="#">Top link two</a>
    <a href="#">Top link three</a>
    <a href="#">Top link four</a>
    <a href="#">Top link five</a>
  </div> 
  <div id="sideNav"> 
    <a href="#">Left link one</a>
    <a href="#">Left link two</a>
    <a href="#">Left link three</a>
    <a href="#">Left link four</a>
  </div> 
  <div id="sideRight"> 
     This is a test. 
  </div> 
  <div id="content"> 
    <div class="item"> 
      <h3>Item One</h3> 
      <p>
       This is a test. 
      </p>
    </div>
    <div class="item"> 
      <h3>Item Two</h3> 
      <p>
       This is a test. 
      </p>
    </div>
  </div> 
   <div id="footer"> 
    Footer
  </div> 
    <form id="search" action=""> 
      <input type="text" name="txtSearch" size="12"> 
      <input type="submit" name="submit" value="Search"> 
    </form> 
</div> 
</body>
</html>

Use absolute position to create header and three column under it

 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  color: black;
  background-color: #ccc;
}
#top {
  margin: 5px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  height: 70px;
}
#left {
  position: absolute;
  top: 97px;
  left: 0px;
  margin: 5px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  width: 90px;
}
#middle {
  margin: 0px 122px 5px 122px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
}
#right {
  position: absolute;
  top: 97px;
  right: 0px;
  margin: 5px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  width: 90px;
}
  </style>
</head>
<body>
  <div id="top">
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  </div>
  <div id="left">
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  </div>
  <div id="middle">
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  </div>
  <div id="right">
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  </div>
</body>
</html>

Use left property to control the column position

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#header {
 position: absolute;
 left: 65%;
 top: 50%;
 width: 125px;
 font-size: small;
}
#columnSmall {
 position: absolute;
 left: 35%;
 width: 15%;
 top: 1%;
 background: #fff;
font-size: small;
}
#columnMain {
 position: absolute;
 left: 5%;
 width: 45%;
 top: 40%;
 background: #fff;
 text-align: justify;
 border-width: 0;
 font-size: large;
}
#columnMedium {
 position: absolute;
 left: 80%;
 width: 20%;
 top: 10%;
 background: #fff;
}
</style>
</head>

<body>
  <div id="header">
   <h1>Header header header header</h2>
  </div>
  <div id="columnSmall">
   <p>small column small small.</p>
  </div>
  <div id="columnMain">
<p>This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. 
</p>
  </div>
  <div id="columnMedium">
<p>This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. 
</p>
  </div>
  
</body>
</html>

Use margin to layout the center column

 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
#top {
  margin: 5px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  height: 70px;
}
#left {
  position: absolute;
  top: 97px;
  left: 0px;
  margin: 5px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  width: 90px;
}
#middle {
  margin: 0px 122px 5px 122px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
}
#right {
  position: absolute;
  top: 97px;
  right: 0px;
  margin: 5px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  width: 90px;
}
#bottom {
  margin: 5px 122px 5px 122px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
}
  </style>
</head>

<body>
  <div id="top">
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  </div>
  <div id="left">
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  </div>
  <div id="middle">
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  </div>
  <div id="right">
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  </div>
  <div id="bottom">
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  </div>
</body>

</html>

HTML/CSS/Layout/three Columns

Содержание

3 column

3 Column fluid layout - 25% side columns

3 column fluid layout - 33% columns

3 Column fluid layout: 50% column, columns

3 columns, all fluid

Basic 3-Column Sample Page

Column left, column main, column right

Faux Three Column Liquid Layout

Floated Three Column Layout

Floated Three Column Layout 2

float left and right three columns

Header and sub header with three columns

Header and three columns under

Three Column Design Using HTML with Table

Three Column Elastic Layout

Three Column Hybrid Layout

Three-Column Layout Demonstration with fixed width

Three-Column Layout Demonstration with Javascript

Three Column Layout in CSS

Three-Column Layout with absolute position

three column layout with header and footer

Three-Column Layout without footer

Three column layout with sub sections

Three Column Liquid Layout

Three columns: all floating from left

Three columns, left and right column has abolute position

Three columns with header and footer

Three columns with navigation on the right

Three columns with no header and footer

Top and left navigational bar and three columns

Use absolute position to create header and three column under it

Use left property to control the column position

Use margin to layout the center column

Навигация

Поиск