HTML/CSS/Layout/Four Columns
Содержание
4 columns, all fluid
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title></title>
<style type="text/css">
#leftcontent {
position: absolute;
left:1%;
width:20%;
top:50px;
background:#eee;
}
#centerleftcontent {
position: absolute;
left:22%;
width:28%;
top:50px;
background:#fff;
}
#centerrightcontent {
position: absolute;
left:51%;
width:28%;
top:50px;
background:#ccc;
}
#rightcontent {
position: absolute;
left:80%;
width:19%;
top:50px;
background:#ddd;
}
#rightcontent, #centerrightcontent, #centerleftcontent, #leftcontent {
border:1px solid #000;
}
</style>
</head><body>
<div id="banner"><h1>4 columns, all fluid</div>
<div id="leftcontent">
<h1>leftcontent</h1>
<p>this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. </p>
</div>
<div id="centerleftcontent">
<h1>centerleftcontent</h1>
<p>this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. </p>
</div>
<div id="centerrightcontent">
<h1>centerrightcontent</h1>
<p>this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. </p>
</div>
<div id="rightcontent">
<h1>rightcontent</h1>
<p>this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. </p>
</div>
</body>
</html>
Four columns with absolute position
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#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>
<div id="columnLeft">
<h2>Left Column</h2>
<p>This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text.
</p>
</div>
<div id="columnInnerLeft">
<h2>Inner Left Column</h2>
<p>This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text.
</p>
</div>
<div id="columnInnerRight">
<h2>Inner Right Column</h2>
<p>This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text.
</p>
</div>
<div id="columnRight">
<h2>Right Column</h2>
<p>This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text.
</p>
</div>
</body>
</html>
<!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>
<div id="column1">
Content of column 1.
<ul>
<li><a href="">A</a></li>
<li><a href="">B</a></li>
<li><a href="">C</a></li>
<li><a href="">D</a></li>
<li><a href="">E</a></li>
<li><a href="">F</a></li>
</ul>
</div>
<div id="column2">
Content of column 2.
</div>
<div id="column3">
Content of column 3.
</div>
<div id="column4">
Content of column 4.
</div>
<div id="footer">
Content of footer.
</div>
</body>
</html>
<!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>
<div id="column1">
Content of column 1.
</div>
<div id="column2">
Content of column 2.
</div>
<div id="column3">
Content of column 3.
</div>
<div id="column4">
Content of column 4.
</div>
<div id="footer">
Content of footer.
</div>
</body>
</html>
<!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>
<div id="column1">
Content of column 1.
<ul>
<li><a href="">A</a></li>
<li><a href="">B</a></li>
<li><a href="">C</a></li>
<li><a href="">D</a></li>
<li><a href="">E</a></li>
<li><a href="">F</a></li>
</ul>
</div>
<div id="column2">
Content of column 2.
</div>
<div id="column3">
Content of column 3.
</div>
<div id="column4">
Content of column 4.
</div>
<div id="footer">
Content of footer.
</div>
</body>
</html>
<!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>
<div id="column1">
Content of column 1.
</div>
<div id="column2">
Content of column 2.
</div>
<div id="column3">
Content of column 3.
</div>
<div id="column4">
Content of column 4.
</div>
<div id="footer">
Content of footer.
</div>
</body>
</html>
Main title with four columns under
<!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>
<div id="header">
<h1>Main Title Goes Here</h1>
</div>
<div id="columnLeft">
<h2>Left Column</h2>
<p>This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text.
</p>
</div>
<div id="columnInnerLeft">
<h2>Inner Left Column</h2>
<p>This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text.
</p>
</div>
<div id="columnInnerRight">
<h2>Inner Right Column</h2>
<p>This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text.
</p>
</div>
<div id="columnRight">
<h2>Right Column</h2>
<p>This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text.
</p>
</div>
</body>
</html>