HTML/CSS/Layout/Two columns — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Версия 09:21, 26 мая 2010
Содержание
- 1 2-column layout with margin in between
- 2 2-column Layout with total width 922px, and float right
- 3 2-column, with float left and right, left 678px width
- 4 2 column with left content floats left
- 5 2-column with relative positioned right column
- 6 2-column with total width 922 px and left column 678 px, float right
- 7 2-column with total width 922px, left width 200px, float right
- 8 Floated Two Column Layout
- 9 Floated Two-Column Layout 2
- 10 float left and right with other content
- 11 Head and footer with two columns in between
- 12 Header and sub header with two columns and footer
- 13 Header and two-column layout
- 14 Header bar, two columns, menu on the right
- 15 Master header and two columns
- 16 Two column: content and right bar
- 17 Two Column Layout in HTML with table
- 18 Two columns
- 19 Two Columns Layout Using CSS
- 20 Two columns with a footer
- 21 Two columns with background
- 22 Two columns with header and footer
- 23 Two columns with header banner
- 24 Two columns with separator
- 25 Two columns with width: 50%
- 26 Two column with negative margin
- 27 Two row layout: one floats left, one floats right
2-column layout with margin in between
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
#wrapper {
width: 922px;
}
#leftcolumn {
border: 1px solid #ccc;
background: #F6F0E0;
margin: 10px 5px 10px 0px;
padding: 10px;
height: 500px;
width: 436px;
float: left;
}
#rightcolumn {
float: right;
border: 1px solid #ccc;
background: #C0C8B3;
margin: 10px 0px 10px 0px;
padding: 10px;
height: 500px;
width: 436px;
display: inline;
position: relative;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="leftcolumn"> Left Column </div>
<div id="rightcolumn"> Right Column </div>
</div>
</body>
</html>
2-column Layout with total width 922px, and float right
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
#wrapper {
margin: 0 auto;
width: 922px;
}
#leftcolumn {
color: #ccc;
border: 1px solid #ccc;
background:#F6F0E0;
margin: 10px 0px 10px 0px;
padding: 10px;
height: 500px;
width: 439px;
float: left;
}
#rightcolumn {
float: right;
color: #333;
border: 1px solid #ccc;
background:#CCC;
margin: 10px 0px 10px 0px;
padding: 10px;
height: 500px;
width: 439px;
display: inline;
position: relative;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="leftcolumn"> Left Column </div>
<div id="rightcolumn"> Right Column </div>
</div>
</body>
</html>
2-column, with float left and right, left 678px width
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
#wrapper {
width: 922px;
}
#leftcolumn {
border: 1px solid #ccc;
background: #CCC8B3;
margin: 10px 5px 10px 0px;
padding: 10px;
height: 500px;
width: 678px;
float: left;
}
#rightcolumn {
float: right;
border: 1px solid #ccc;
background: #F6F0E0;
margin: 10px 0px 10px 0px;
padding: 10px;
height: 500px;
width: 195px;
display: inline;
position: relative;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="leftcolumn"> this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. </div>
<div id="rightcolumn"> this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. </div>
</div>
</body>
</html>
2 column with left content floats left
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title></title>
<style type="text/css">
#leftcontent {
float:left;
width:67%;
background:#fff;
border:2px solid #000;
}
#rightcontent p {
font-size:10px;
margin-left:0px;
}
</style>
</head><body>
<div id="leftcontent">
<h1>2 columns</h1>
<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. 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.
this is a test. this is a test. this is a test. this is a test.
</p>
</div>
</body>
</html>
2-column with relative positioned right column
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
#wrapper {
width: 922px;
}
#leftcolumn {
border: 1px solid #ccc;
background: #F6F;
margin: 10px 5px 10px 0px;
padding: 10px;
height: 500px;
width: 195px;
float: left;
}
#rightcolumn {
float: right;
border: 1px solid #ccc;
background: #CCC;
margin: 10px 0px 10px 0px;
padding: 10px;
height: 500px;
width: 678px;
display: inline;
position: relative;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="leftcolumn"> Left Column </div>
<div id="rightcolumn"> Right Column </div>
</div>
</body>
</html>
2-column with total width 922 px and left column 678 px, float right
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
#content {
margin: 0 auto;
width: 922px;
}
#leftcolumn {
color: #333;
border: 1px solid #ccc;
background:#CCC8B3;
margin: 10px 0px 10px 0px;
padding: 10px;
height: 500px;
width: 678px;
float: left;
}
#rightcolumn {
float: right;
position: relative;
color: #333;
border: 1px solid #ccc;
background:#F6F0E0;
margin: 10px 0px 10px 0px;
padding: 10px;
height: 500px;
width: 200px;
display: inline;
}
</style>
</head>
<body>
<div id="content">
<div id="leftcolumn">this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test. ]this is a test.
</div>
<div id="rightcolumn"> Right Column </div>
</div>
</body>
</html>
2-column with total width 922px, left width 200px, float right
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
#wrapper {
width: 922px;
}
#leftcolumn {
color: #333;
border: 1px solid #ccc;
background: #F0E6F0;
margin: 10px 0px 10px 0px;
padding: 10px;
height: 500px;
width: 200px;
float: left;
}
#rightcolumn {
float: right;
color: #333;
border: 1px solid #ccc;
background: #8B3CCC;
margin: 10px 0px 10px 0px;
padding: 10px;
height: 500px;
width: 678px;
display: inline;
position: relative;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="leftcolumn"> Left Column this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
</div>
<div id="rightcolumn"> this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
</div>
</div>
</body>
</html>
Floated Two Column Layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Floated Two Col Layout</title>
<style type="text/css">
#branding {
height: 50px;
background-color:#b0b0b0;
padding: 20px;
}
#footer {
background-color:#b0b0b0;
padding: 1px 20px;
}
body {
min-width: 760px;
}
#wrapper {
width: 720px;
margin: 0 auto;
text-align: left;
}
#content {
width: 520px;
float: right;
}
#mainNav {
width: 160px;
float: left;
}
#footer {
clear: both;
}
#mainNav {
padding-top: 20px;
padding-bottom: 20px;
}
#mainNav * {
padding-left: 20px;
padding-right: 20px;
}
#mainNav * * {
padding-left: 0;
padding-right: 0;
}
#content * {
padding-right: 20px;
}
#content * * {
padding-right: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="branding">
<h1>Branding</h1>
</div>
<div id="content">
<h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<h2>Ea commodo consequat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<h2>Magna aliquam erat volutpat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
<ul id="mainNav">
<li class="first"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Case Studies</a></li>
</ul>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
Floated Two-Column Layout 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Floated Two Col Layout</title>
<style type="text/css">
#branding {
height: 50px;
background-color:red;
padding: 20px;
}
#mainNav {
list-style: none;
background-color:#eee;
}
#footer {
background-color:gold;
padding: 1px 20px;
}
body {
min-width: 760px;
}
#wrapper {
width: 720px;
margin: 0 auto;
text-align: left;
}
#content {
width: 520px;
float: right;
}
#mainNav {
width: 180px;
float: left;
}
#footer {
clear: both;
}
#mainNav {
padding-top: 20px;
padding-bottom: 20px;
}
#mainNav * {
padding-left: 20px;
padding-right: 20px;
}
#mainNav * * {
padding-left: 0;
padding-right: 0;
}
#content * {
padding-right: 20px;
}
#content * * {
padding-right: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="branding">
<h1>Branding</h1>
</div>
<div id="content">
<h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<h2>Ea commodo consequat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<h2>Ea commodo consequat</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
<ul id="mainNav">
<li class="first"><a href="#">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">News</a></li>
<li><a href="">Products</a></li>
<li><a href="">Services</a></li>
<li><a href="">Clients</a></li>
<li><a href="">Case Studies</a></li>
</ul>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
float left and right with other content
<!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;
}
p#right {
float: right;
}
</style>
</head>
<body>
<p id="left">
This is the text of the first paragraph.
</p>
<p id="right">
This is the text of the second paragraph.
</p>
<p>
This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph. This is the text of the third paragraph.
</p>
</body>
</html>
<!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 {
background-color: #666;
border-bottom: 1px solid #333;
}
#columnLeft {
float: left;
width: 160px;
margin-left: 10px;
padding-top: 1em;
}
#columnRight {
padding-top: 1em;
margin: 0 2em 0 200px;
}
#footer {
clear: both;
background-color: #ccc;
padding-bottom: 1em;
border-top: 1px solid #333;
padding-left: 200px;
}
</style>
</head>
<body>
<div id="header">
<h1>Header</h1>
</div>
<div id="columnLeft">
<p>This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text.
</p>
<h3>Navigation</h3>
<p>
<ul>
<li><a href="">Q</a></li>
<li><a href="">N</a></li>
<li><a href="">C</a></li>
<li><a href="">D</a></li>
<li><a href="">R</a></li>
</ul>
</p>
</div>
<div id="columnRight">
<p>This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text.
</p>
<p>This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text.
</p>
</div>
<div id="footer">
<p>Here is the footer. </p>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Entry page 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;
}
#breadcrumb {
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;
}
body#entry #content-wrapper {
padding-left: 1em;
padding-right: 50%;
}
body#entry #navigation {
position: absolute;
top: 4em;
right: 20px;
max-width: 45%;
}
body#entry #related {
display: none;
}
body#entry #footer {
padding: 5px 0 5px 1.5em;
}
#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;
color: #030;
}
</style>
</head>
<body id="entry">
<div id="wrapper">
<div id="header"><h1>Header</h1></div>
<div id="breadcrumb">Sub header</div>
<div id="content-wrapper">
<div id="content-inner">
<h2>Header 2</h2>
<p>this is a test. this is a test. this is a test. </p>
<p>this is a test. this is a test. this is a test. </p>
<p>this is a test. this is a test. this is a test. </p>
<p>this is a test. this is a test. this is a test. </p>
</div>
</div>
<div id="navigation">
<ul>
<li><a href="">r</a></li>
<li><a href="">h</a></li>
<li><a href="">i</a></li>
<li><a href="">o</a></li>
</ul>
</div>
<div id="related"></div>
<div id="footer">foote</div>
</div>
</body>
</html>
Header and two-column layout
<?xml version="1.0" ?>
<!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" lang="en" xml:lang="en">
<head>
<title>Try It Out - A sample layout</title>
<style rel="stylesheet" type="text/css">
h1 {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
background-color: #666666;
padding: 10px;
z-index: 2;
}
div.nav {
z-index: 1;
position: absolute;
top: 60px;
left: 0px;
width: 100px;
height: 300px;
padding-left: 10px;
padding-top: 20px;
padding-bottom: 10px;
background-color: #efefef;
}
h2 {
padding-top: 80px;
padding-left: 115px;
}
p {
padding-left: 115px;
}
img {
float: left;
width: 60px;
padding-right: 5px;
}
ul {
clear: left;
list-style: circle;
padding-left: 145px;
}
</style>
</head>
<body>
<h1>Cascading Style Sheets</h1>
<div class="nav"><a href="">Examples index</a> </div>
<h2>CSS Positioning</h2>
<p class="abstract">this is a test. this is a test. </p>
<ul>
<li>Normal flow</li>
<li>Absolute positioning</li>
<li>Floating</li>
</ul>
</body>
</html>
<?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 15px 0px 15px;
padding: 10px 10px 10px 0px;
color: #ccc;
border-bottom: 1px solid #ccc;
height: 25px;
}
#content {
margin: 0px 122px 0px 5px;
padding: 20px 10px 20px 10px;
}
#sidebar {
position: absolute;
top: 75px;
right: 0px;
margin: 0px 0px 5px 0px;
padding: 0px 10px 10px 15px;
width: 90px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="top">
<h1>Lorem ipsum</h1>
</div>
<div id="content">
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test.
</div>
<div id="sidebar">
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. this is a test.
</div>
</body>
</html>
Master header and two columns
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Positioning Example</title>
<style rel="stylesheet" type="text/css">
#page {
width: 800px;
position: absolute;
top: 10px;
left: 10px;
background-color: #ffffff;
}
#masthead {
border: 1px solid #cccccc;
}
#sideNav {
float: left;
width: 150px;
background-color: #F5f7f7;
border: 1px solid #cccccc;
}
#content {
margin: 0px 0px 0px 150px;
border-left: 1px solid #cccccc;
}
.item {
padding: 10px;
min-height: 75px;
height: 75px;
}
#sideNav a:link,#sideNav a:visited {
display: block;
padding: 5px;
}
#sideNav a:hover {
background-color: #d6d6d6;
}
</style>
</head>
<body>
<div id="page">
<div id="masthead">
<h2>Masthead</h2>
</div>
<div id="sideNav">
<a href="">one</a>
<a href="">two</a>
<a href="">three</a>
<a href="">four</a>
</div>
<div id="content">
<div class="item">
<h3>Item One</h3>
<p>
Lorem ipsum dolor sit amet.
</p>
</div>
<div class="item">
<h3>Item Two</h3>
<p>
Lorem ipsum dolor sit amet.
</p>
</div>
</div>
</div>
</body>
</html>
Two column: content and right bar
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
min-width:740px;
}
#right{
float: right;
width: 200px;
background-color: #ccc;
border:1px solid #000;
}
#content{
margin-right:220px;
border:1px solid #000;
background-color: #aaa;
}
</style>
</head>
<body>
<div id="outer">
<div id="right">
<h3>Right Side</h3>
<p>This is some right text : this is some righ text : this is some right text
: This is some right text : this is some righ text : this is some right
text : This is some right text : this is some righ text : this is some right
text : This is some right text : this is some righ text : this is some right
text : </p>
</div>
<div id="content">
<h3>Content Area</h3>
<p><img src="http://www.wbex.ru/style/logo.png" width="500" height="102" /></p>
<p>Main area text. Main area text. Main area text.Main area text.Main area
text.Main area text.Main area text.Main area text.Main area text.Main area
text.Main area text.Main area text.Main area text.Main area text.Main area
text.vMain area text.Main area text.Main area text.Main area text.Main area
text.Main area text.</p>
</div>
<div style="clear:both">Footer</div>
</div>
</body>
</html>
Two Column Layout in HTML with table
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Two Column Layout in 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;
}
</style>
</head>
<body>
<table width="700" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="header" colspan="2"><h1>My Company Name</h1></td>
</tr>
<tr>
<td class="nav" valign="top" width="100">
<a href="">Home</a><br /><a href="">Products</a><br /><a href="">Services</a><br /><a href="">About Us</a><br /><a href="">Contact Us</a>
</td>
<td class="content">
<h2>Sample Web Page</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id
commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam
semper viverra nulla. Sed lacinia feugiat eros. Maecenas ullamcorper ligula quis odio.
Donec pede massa, pharetra sit amet, accumsan a, iaculis egestas, lectus. Etiam
ullamcorper elementum wisi. Etiam et felis aliquet dui tempus sagittis. Donec dapibus
ipsum id leo. Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. Integer
lobortis wisi id erat. Nullam aliquet augue ac elit. Nulla facilisi. Vivamus ligula
tortor, molestie at, accumsan quis, semper vitae, augue. Praesent pede neque, sollicitudin
non, facilisis sed, viverra a, pede. Cras nec urna. Curabitur ut metus. Curabitur erat
lacus, tempus vitae, elementum nec, pulvinar vel, leo. Sed a velit. Proin erat. Donec
sem. </p>
</td>
</tr>
</table>
</body>
</html>
Two columns
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Multi-column Layout</title>
<style rel="stylesheet" type="text/css">
div#container {
border: 1px solid black;
min-width: 600px;
max-width: 1000px;
position: relative;
margin: 10px;
}
div#left {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 200px;
background: rgb(234, 234, 234);
padding: 5px;
border-right: 1px solid black;
}
div#content {
margin-left: 211px;
background: white;
border: 1px solid white;
padding: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
Left side column.
</div>
<div id="content">
<h4>Lorem Ipsum</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu
</p>
</div>
</div>
</body>
</html>
Two Columns Layout Using CSS
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Two Columns Layout Using CSS</title>
<style rel="stylesheet" type="text/css">
.page {
margin-left: auto;
margin-right: auto;
width: 700px;
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;
float: left;
width: 100px;
height: 30em;
}
.content {
padding: 10px;
}
</style>
</head>
<body>
<div class="page">
<div class="header"><h1>My Company Name</h1></div>
<div class="nav">
<a href="">Home</a><br /><a href="">Products</a><br /><a href="">Services</a><br /><a href="">About Us</a><br /><a href="">Contact Us</a>
</div>
<div class="content">
<h2>Sample Web Page</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id
commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam
semper viverra nulla. Sed lacinia feugiat eros. Maecenas ullamcorper ligula quis odio.
Donec pede massa, pharetra sit amet, accumsan a, iaculis egestas, lectus. Etiam
ullamcorper elementum wisi. Etiam et felis aliquet dui tempus sagittis. Donec dapibus
ipsum id leo. Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. Integer
lobortis wisi id erat. Nullam aliquet augue ac elit. Nulla facilisi. Vivamus ligula
tortor, molestie at, accumsan quis, semper vitae, augue. Praesent pede neque, sollicitudin
non, facilisis sed, viverra a, pede. Cras nec urna. Curabitur ut metus. Curabitur erat
lacus, tempus vitae, elementum nec, pulvinar vel, leo. Sed a velit. Proin erat. Donec
sem. </p>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#columnLeft {
float: left;
width: 67%;
background: #fff;
border-right: 1px solid black;
}
#columnRight {
padding-left: 2em;
margin-top: 0;
padding-top: 0;
}
#footer {
clear: both;
padding-bottom: 1em;
border-top: 1px solid #333;
text-align: center;
}
</style>
</head>
<body>
<div id="columnLeft">
<h1>Header Header Header Header Header </h1>
<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>
<p>This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text.
</p>
</div>
<div id="columnRight">
<p>This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text.
</p>
<h3>Navigation</h3>
<p>
<ul>
<li><a href="">Q</a></li>
<li><a href="">N</a></li>
<li><a href="">C</a></li>
<li><a href="">D</a></li>
<li><a href="">R</a></li>
</ul>
</p>
</div>
<div id="footer">
<p>Here is the footer. </p>
</div>
</body>
</html>
Two columns with background
<!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">
#newsColumn,#infoColumn {
float: left;
width: 250px;
}
#newsColumn {
background-color: #ccc;
}
#infoColumn {
background-color: #999;
}
#newsColumnContent,#infoColumnContent {
padding: 10px;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="newsColumn">
<div id="newsColumnContent">
<h1>News</h1>
<p>Mauris convallis, leo a auctor vestibulum, dui pede dictum justo, nec lacinia turpis leo a eros. Suspendisse facilisis mattis wisi. Vivamus suscipit pretium tellus. Nam massa. Nunc urna.</p>
<p>Mauris convallis, leo a auctor vestibulum, dui pede dictum justo, nec lacinia turpis leo a eros. Suspendisse facilisis mattis wisi. Vivamus suscipit pretium tellus. Nam massa. Nunc urna.</p>
</div>
</div>
<div id="infoColumn">
<div id="infoColumnContent">
<h1>Information</h1>
<p>Mauris convallis, leo a auctor vestibulum, dui pede dictum justo, nec lacinia turpis leo a eros. Suspendisse facilisis mattis wisi. Vivamus suscipit pretium tellus. Nam massa. Nunc urna.</p>
<p>Mauris convallis, leo a auctor vestibulum, dui pede dictum justo, nec lacinia turpis leo a eros. Suspendisse facilisis mattis wisi. Vivamus suscipit pretium tellus. Nam massa. Nunc urna.</p>
</div>
</div>
<div id="footer">
<p>Footer content goes here.</p>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Multi-column Layout</title>
<style rel="stylesheet" type="text/css">
div#heading,
div#container,
div#footer {
border: 1px solid black;
max-width: 1000px;
min-width: 600px;
}
div#container {
position: relative;
margin: 0 auto;
}
div#heading {
margin: 10px auto -1px auto;
}
div#heading h1 {
margin: 5px;
}
div#left {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 200px;
background: #ccc;
padding: 5px;
border-right: 1px solid black;
}
div#content {
margin-left: 211px;
background: white;
border: 1px solid white;
padding: 10px;
}
div#footer {
margin: -1px auto 10px auto;
}
div#footer p {
margin: 5px;
}
</style>
</head>
<body>
<div id="heading">
<h1>Heading</h1>
</div>
<div id="container">
<div id="left">
Left side column.
</div>
<div id="content">
<h4>Lorem Ipsum</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu
</p>
</div>
</div>
<div id="footer">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu
</p>
</div>
</body>
</html>
Two columns with header banner
<!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" />
<title></title>
<style rel="stylesheet" type="text/css">
#banner {
margin-top: 10px;
border-bottom: 1px solid #73AFB7;
padding-left: 15px;
}
#banner p {
margin: 0;
height: 85px;
}
#mainNav {
float: left;
width: 175px;
margin-top: 20px;
padding-left: 10px;
}
#content {
margin-left: 200px;
padding-left: 10px;
border-left: 1px solid #D6ECAE;
}
#footer {
clear: both;
padding-top: 10px;
border-top: 1px solid #294E56;
}
p {
margin-top: 5px;
margin-bottom: 0;
margin-top: 0;
margin-bottom: 5px;
}
.byline {
color: #73afb7;
margin-bottom: 10px;
}
#mainNav ul {
margin-left: 0;
padding-left: 0;
}
#mainNav li {
margin-bottom: 10px;
}
#content ul {
font-size: 1.2em;
}
#content li {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="banner">
<p><img src="http://www.wbex.ru/style/logo.png" alt="" width="553" height="70" /></p>
</div>
<div id="mainNav">
<ul>
<li>this is a test. </li>
<li>this is a test. </li>
<li>this is a test. </li>
<li>this is a test. </li>
<li>this is a test. </li>
</ul>
</div>
<div id="content">
<h1>header</h1>
<p class="byline">By </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Duis autem vel eum iriure:</p>
<h2>header 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Duis autem vel eum iriure:</p>
<ul>
<li>E</li>
<li>L</li>
<li>E</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Duis autem vel eum iriure.</p>
<h2>Take Off that Smoking Jacket and Put on Those Overalls </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Duis autem vel eum iriure.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Duis autem vel eum iriure.</p>
<h2>From Herbal Tea to Compost Tea </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Duis autem vel eum iriure:</p>
<p> </p>
</div>
<div id="footer">
<p>Copyright 2006</p>
</div>
</body>
</html>
Two columns with separator
<!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">
#wrapper {
background: red;
}
#newsColumn,#infoColumn {
float: left;
width: 250px;
}
#newsColumnContent,#infoColumnContent {
padding: 10px;
}
#footer {
clear: both;
}
.separator {
clear: both;
height: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="newsColumn">
<div id="newsColumnContent">
<h1>News</h1>
<p>this is a test. </p>
</div>
</div>
<div id="infoColumn">
<div id="infoColumnContent">
<h1>Information</h1>
<p>this is a test. this is a test. this is a test. this is a test. this is a test. </p>
</div>
</div>
<div class="separator">
</div>
</div>
<div id="footer">
<p>Footer content goes here.</p>
</div>
</body>
</html>
Two columns with width: 50%
<!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>two-column layout</title>
<style type="text/css" media="Screen">
#newsColumn,#infoColumn {
float: left;
width: 50%;
}
#newsColumn {
background-color: #ccc;
}
#infoColumn {
background-color: #999;
}
#newsColumnContent,#infoColumnContent {
padding: 10px;
}
</style>
</head>
<body>
<div id="newsColumn">
<div id="newsColumnContent">
<h1>News</h1>
<p>Mauris convallis, leo a auctor vestibulum, dui pede dictum justo, nec lacinia turpis leo a eros. Suspendisse facilisis mattis wisi. Vivamus suscipit pretium tellus. Nam massa. Nunc urna.</p>
<p>Mauris convallis, leo a auctor vestibulum, dui pede dictum justo, nec lacinia turpis leo a eros. Suspendisse facilisis mattis wisi. Vivamus suscipit pretium tellus. Nam massa. Nunc urna.</p>
</div>
</div>
<div id="infoColumn">
<div id="infoColumnContent">
<h1>Information</h1>
<p>Mauris convallis, leo a auctor vestibulum, dui pede dictum justo, nec lacinia turpis leo a eros. Suspendisse facilisis mattis wisi. Vivamus suscipit pretium tellus. Nam massa. Nunc urna.</p>
<p>Mauris convallis, leo a auctor vestibulum, dui pede dictum justo, nec lacinia turpis leo a eros. Suspendisse facilisis mattis wisi. Vivamus suscipit pretium tellus. Nam massa. Nunc urna.</p>
</div>
</div>
</body>
</html>
Two column with negative margin
<!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>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#outer{
width:480px;
float:left;
}
#inner{
background:#ccc;
float:right;
width:200px;
position:relative;
margin:-1px -199px -1px 0;
left:20px;
}
#inner2{
float:left;
width:480px;
position:relative;
margin-left:-478px;
left:-20px;
}
* html #inner2{
margin-right:-3px;
}
.clearer{
height:1px;
overflow:hidden;
margin-top:-1px;
clear:both;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="inner2">
<p>this is a test. this is a test. this is a test. </p>
</div>
<p>this is a test. this is a test. this is a test. this is a test. </p>
<div class="clearer"></div>
</div>
</div>
</body>
</html>
Two row layout: one floats left, one floats right
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css" media="screen">
#content {
float:left;
width:74%;
margin-bottom:1%;
background-color:#999;
}
#sidebar {
float:right;
width:25%;
margin-bottom:1%;
background-color:#666;
}
#footer {
clear:both;
background-color:#333;
}
body#contact #content {
width:100%;
}
body#contact #sidebar {
display:none;
}
</style>
</head>
<body id="contact">
<div id="content">
<h1>Content</h1>
</div>
<div id="sidebar">
<h1>Sidebar</h1>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</body>
</html>