HTML/CSS/Layout/three Columns — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Текущая версия на 08:16, 26 мая 2010
Содержание
- 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>
<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>
<!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>
<!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>
<!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>
<!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>
<!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>