HTML/CSS/Layout/three Columns
Содержание
- 1 3 column
- 2 3 Column fluid layout - 25% side columns
- 3 Three column fluid layout
- 4 this is the title
- 5 Headline
- 6 This is the header
- 7 Headline
- 8 3 columns, all fluid
- 9 mainleft
- 10 maincenter
- 11 mainright
- 12 header
- 13 Header header header header header header
- 14 Branding
- 15 Lorem ipsum dolor
- 16 Branding
- 17 Lorem ipsum dolor
- 18 Branding
- 19 Lorem ipsum dolor
- 20 Header
- 21 leftcontent
- 22 centercontent
- 23 rightcontent
- 24 My Company Name
- 25 Branding
- 26 Lorem ipsum dolor
- 27 Branding
- 28 Lorem ipsum dolor
- 29 This is the header
- 30 This is the header area of the three column plus header layout
- 31 This is the header area of the three column plus header layout
- 32 Branding
- 33 Lorem ipsum dolor
- 34 Main Title
- 35 A Fixed Heading
- 36 Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- 37 Header header header header</h2> </div> small column small small. 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. 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. </body> </html> </source> Use margin to layout the center column
3 column
<source lang="html4strict">
<!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>
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 :
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
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
</body> </html>
</source>
3 Column fluid layout - 25% side columns
<source lang="html4strict">
<!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>
Three column fluid layout
This is some text for the right column :
This is some text for the center column :
This is some text for the left column : This is some text for the left column.
</body> </html>
</source>
3 column fluid layout - 33% columns
<source lang="html4strict">
<!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>
this is the title
Sub header
this is a test.
Sub header
this is a test.
Sub header
this is a test.
this is a test.
this is a test.
this is a test.
Headline
Sub Header
this is a test.
this is a test.
</body> </html>
</source>
3 Column fluid layout: 50% column, columns
<source lang="html4strict">
<!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>
This is the header
Sub header
this is a test.
Sub header
this is a test.
center column.
Headline
Sub Header
this is a test.
</body> </html>
</source>
3 columns, all fluid
<source lang="html4strict">
<!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>
mainleft
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
maincenter
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
mainright
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
</body> </html>
</source>
Basic 3-Column Sample Page
<source lang="html4strict">
<!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>
header
Web.
What?
CSS in Context
their systems.
Content
page.
</body> </html>
</source>
Column left, column main, column right
<source lang="html4strict">
<!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>
Header header header header header header
- <a href="">Q</a>
- <a href="">N</a>
- <a href="">C</a>
- <a href="">D</a>
- <a href="">R</a>
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.
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.
</body> </html>
</source>
Faux Three Column Liquid Layout
<source lang="html4strict">
<!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>
Branding
Lorem ipsum dolor
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.
Ea commodo consequat
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.
Magna aliquam erat volutpat
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.
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.
Magna aliquam erat volutpat
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.
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.
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.
</body> </html>
</source>
Floated Three Column Layout
<source lang="html4strict">
<!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>
Branding
Lorem ipsum dolor
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.
Ea commodo consequat
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.
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.
Magna aliquam erat volutpat
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.
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.
Magna aliquam erat volutpat
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.
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.
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.
</body> </html>
</source>
Floated Three Column Layout 2
<source lang="html4strict">
<!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>
Branding
Lorem ipsum dolor
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.
Ea commodo consequat
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.
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.
Magna aliquam erat volutpat
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.
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.
Magna aliquam erat volutpat
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.
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.
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.
</body> </html>
</source>
float left and right three columns
<source lang="html4strict">
<!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>
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.
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.
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.
</body> </html> </source>
Header and sub header with three columns
<source lang="html4strict">
<!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">
Header
this is a test
.
this
is
a
test
.
this
is
a
test.
</body> </html>
</source>
Header and three columns under
<source lang="html4strict">
<!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>
leftcontent
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.
centercontent
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.
rightcontent
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.
</body> </html>
</source>
Three Column Design Using HTML with Table
<source lang="html4strict">
<?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>
My Company Name |
||
<a href="">Home</a> |
Sample Web PageLorem 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. |
This right hand bar may contain additional links or info about the site or it may contain advertising. |
</body>
</html>
</source>
Three Column Elastic Layout
<source lang="html4strict">
<!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>
Branding
Lorem ipsum dolor
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.
Ea commodo consequat
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.
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.
Magna aliquam erat volutpat
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.
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.
Magna aliquam erat volutpat
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.
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.
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.
</body> </html>
</source>
Three Column Hybrid Layout
<source lang="html4strict">
<!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>
Branding
Lorem ipsum dolor
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.
Ea commodo consequat
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.
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.
Magna aliquam erat volutpat
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.
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.
Magna aliquam erat volutpat
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.
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.
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.
</body> </html>
</source>
Three-Column Layout Demonstration with fixed width
<source lang="html4strict">
<!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>
This is the header
on the page.
two columns.
first.
spacing.
</body> </html>
</source>
Three-Column Layout Demonstration with Javascript
<source lang="html4strict">
<!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>
This is the header area of the three column plus header layout
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.
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.
The right-hand column is so much like the left-hand column that it seems unworthy of comment.
</body> </html>
</source>
Three Column Layout in CSS
<source lang="html4strict">
<?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">
My Company Name
Sample Web Page
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.
</body>
</html>
</source>
Three-Column Layout with absolute position
<source lang="html4strict">
<!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>
left
center
right
</body> </html>
</source>
<source lang="html4strict">
<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>
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.
</body> </html>
</source>
<source lang="html4strict">
<!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>
This is the header area of the three column plus header layout
This is a test. This is a test.
This is a test. This is a test.
This is a test. This is a test.
</body> </html>
</source>
Three column layout with sub sections
<source lang="html4strict">
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>
main - 100%
leftBar -20%
content - 60%
head - 35% detail - 65% divider
rightBar -20%
</body> </html>
</source>
Three Column Liquid Layout
<source lang="html4strict">
<!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>
Branding
Lorem ipsum dolor
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.
Ea commodo consequat
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.
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.
Magna aliquam erat volutpat
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.
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.
Magna aliquam erat volutpat
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.
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.
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.
</body> </html>
</source>
Three columns: all floating from left
<source lang="html4strict">
<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>
Main Title
Left Column
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Main Column
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text .
Right Column
Text Text Text Text Text Text Text Text Text Text Text Text .
</body> </html>
</source>
Three columns, left and right column has abolute position
<source lang="html4strict">
<?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>
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
</body>
</html>
</source>
<source lang="html4strict">
<!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>
A Fixed Heading
Left side column.
Right side column.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu Aenean dictum dolor ut sem.
Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel conubia nostra, per inceptos hymenaeos.
</body>
</html>
</source>
<source lang="html4strict">
<!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>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
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.
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.
- <a href="">Q</a>
- <a href="">N</a>
- <a href="">C</a>
- <a href="">D</a>
- <a href="">R</a>
</body> </html>
</source>
<source lang="html4strict">
<!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>
Left side column.
Right side column.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu Aenean dictum dolor ut sem.
Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel conubia nostra, per inceptos hymenaeos.
</body>
</html>
</source>
<source lang="html4strict">
<!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>
Masthead
This is a test.
Item One
This is a test.
Item Two
This is a test.
<form id="search" action="">
<input type="text" name="txtSearch" size="12">
<input type="submit" name="submit" value="Search">
</form>
</body> </html>
</source>
Use absolute position to create header and three column under it
<source lang="html4strict">
<?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>
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
</body> </html>
</source>
Use left property to control the column position
<source lang="html4strict">
<!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>
Header header header header</h2>
</div>
small column small small.
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.
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.
</body>
</html>
</source>
Use margin to layout the center column
small column small small.
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.
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.
<source lang="html4strict">
<?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>
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
</body>
</html>
</source>