<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title></title>
<style type="text/css">
4 columns, all fluid</div>
<h1>leftcontent</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.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.
<h1>centerleftcontent</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.
this is a test. this is a test. this is a test. this is a test.
<h1>centerrightcontent</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. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.
<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.
this is a test. this is a test. this is a test. this is a test.
</body>
</html>
</source>
Four columns with absolute 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">
- columnLeft {
position: absolute;
left:5px;
width:190px;
top: 44px;
background:#fff;
}
- columnInnerLeft {
position: absolute;
left: 205px;
width: 190px;
top: 44px;
background: #fff;
text-align: justify;
border-width: 0;
}
- columnInnerRight {
position: absolute;
left: 405px;
width: 190px;
top: 44px;
background: #fff;
}
- columnRight {
position: absolute;
left: 605px;
width: 190px;
top: 44px;
background: #fff;
}
</style>
</head>
<body>
Left Column
This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text.
Inner Left Column
This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text.
Inner Right Column
This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text.
Right Column
This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. 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>
Four columns with footer
<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">
div {
border: 1px solid black;
background: gray;
height: 400px;
padding: 5px;
}
div#column1 {
float: left;
width: 150px;
margin: 0 5px 0 0;
background: blue;
}
div#column2, div#column3 {
float: right;
width: 150px;
margin: 0 0 0 5px;
background: yellow;
}
div#column4 {
margin: 0 334px 0 167px;
background: pink;
}
div#footer {
height: 35px;
margin: 5px 0 0 0;
clear: both;
}
</style>
</head>
<body>
Content of column 1.
- <a href="">A</a>
- <a href="">B</a>
- <a href="">C</a>
- <a href="">D</a>
- <a href="">E</a>
- <a href="">F</a>
</body>
</html>
</source>
Four columns with footer 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>
<head>
<title></title>
<style type="text/css">
div {
border: 1px solid black;
background: pink;
height: 200px;
padding: 5px;
}
div#column1 {
float: left;
width: 150px;
margin: 0 5px 0 0;
}
div#column2, div#column3 {
float: right;
width: 150px;
margin: 0 0 0 5px;
}
div#column4 {
margin: 0 334px 0 167px;
}
div#footer {
height: 35px;
margin: 5px 0 0 0;
clear: both;
}
</style>
</head>
<body>
</body>
</html>
</source>
Four columns with footer 3
<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">
div {
font: 18px sans-serif;
border: 1px solid black;
background: gray;
height: 400px;
padding: 5px;
}
div#column1 {
float: left;
width: 150px;
margin: 0 5px 0 0;
background: yellow;
}
div#column2, div#column3 {
float: right;
width: 150px;
margin: 0 0 0 5px;
background: pink;
}
div#column4 {
margin: 0 334px 0 167px;
background: red;
}
div#footer {
height: 35px;
margin: 5px 0 0 0;
clear: both;
}
</style>
</head>
<body>
Content of column 1.
- <a href="">A</a>
- <a href="">B</a>
- <a href="">C</a>
- <a href="">D</a>
- <a href="">E</a>
- <a href="">F</a>
</body>
</html>
</source>
four column with float, and a footer with clear both
<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">
div {
color: white;
border: 1px solid black;
background: gray;
height: 200px;
padding: 5px;
}
div#column1 {
float: left;
width: 150px;
margin: 0 5px 0 0;
}
div#column2, div#column3 {
float: right;
width: 150px;
margin: 0 0 0 5px;
}
div#column4 {
margin: 0 334px 0 167px;
}
div#footer {
height: 35px;
margin: 5px 0 0 0;
clear: both;
}
</style>
</head>
<body>
</body>
</html>
</source>
Main title with four columns under
<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">
- columnLeft {
position: absolute;
left:1%;
width:20%;
top: 4em;
background:#fff;
}
- columnInnerLeft {
position: absolute;
left: 22%;
width: 28%;
top: 4em;
background: #fff;
text-align: justify;
border-width: 0;
}
- columnInnerRight {
position: absolute;
left: 51%;
width: 28%;
top: 4em;
background: #fff;
}
- columnRight {
position: absolute;
left: 80%;
width: 19%;
top: 4em;
background: #fff;
}
</style>
</head>
<body>
Left Column
This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text.
Inner Left Column
This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text.
Inner Right Column
This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text.
Right Column
This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. 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>