Содержание

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 columns
6 leftcontent
7 rightcontent
- 7.1 2-column with relative positioned right column
- 7.2 2-column with total width 922 px and left column 678 px, float right
- 7.3 2-column with total width 922px, left width 200px, float right
- 7.4 Floated Two Column Layout
8 Branding
9 Lorem ipsum dolor
- 9.1 Ea commodo consequat
- 9.2 Magna aliquam erat volutpat
- 9.3 Floated Two-Column Layout 2
10 Branding
11 Lorem ipsum dolor
- 11.1 Ea commodo consequat
- 11.2 Ea commodo consequat
- 11.3 float left and right with other content
- 11.4 Head and footer with two columns in between
12 Header
- 12.1 Navigation
- 12.2 Header and sub header with two columns and footer
13 Header
- 13.1 Header 2
- 13.2 Header and two-column layout
14 Cascading Style Sheets
- 14.1 CSS Positioning
- 14.2 Header bar, two columns, menu on the right
15 Lorem ipsum
- 15.1 Master header and two columns
- 15.2 Masthead
  - 15.2.1 Item One
  - 15.2.2 Item Two
- 15.3 Two column: content and right bar
  - 15.3.1 Right Side
  - 15.3.2 Content Area
- 15.4 Two Column Layout in HTML with table
16 My Company Name
- 16.1 Sample Web Page
- 16.2 Two columns
  - 16.2.1 Lorem Ipsum
- 16.3 Two Columns Layout Using CSS
17 My Company Name
- 17.1 Sample Web Page
- 17.2 Two columns with a footer
18 Header Header Header Header Header
- 18.1 Navigation
- 18.2 Two columns with background
19 News
20 Information
- 20.1 Two columns with header and footer
21 Heading
- 21.1 Lorem Ipsum
- 21.2 Two columns with header banner
22 header
- 22.1 header 2
- 22.2 Take Off that Smoking Jacket and Put on Those Overalls
- 22.3 From Herbal Tea to Compost Tea
- 22.4 Two columns with separator
23 News
24 Information
- 24.1 Two columns with width: 50%
25 News
26 Information
- 26.1 Two column with negative margin
- 26.2 Two row layout: one floats left, one floats right
27 Content
28 Sidebar
29 Footer

2-column layout with margin in between

   <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> <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>

Left Column

Right Column

</body> </html>

</source>

2-column Layout with total width 922px, and float 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> <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>

Left Column

Right Column

</body> </html>

</source>

2-column, with float left and right, left 678px width

   <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> <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>

this is a test. this is a test. this is a test.

 this is a test. this is a test. this is a test. this is a test. 
 this is a test. this is a test. this is a test. this is a test. 
 this is a test. this is a test. this is a test. this is a test. 
 this is a test. this is a test. this is a test. this is a test.

this is a test. this is a test. this is a test. this is a test.

 this is a test. this is a test. this is a test. this is a test. 
 this is a test. this is a test. this is a test. this is a test. 
 this is a test. this is a test. 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>

2 column with left content floats left

   <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 {
   float:left;
   width:67%;
   background:#fff;
   border:2px solid #000;
 }
 #rightcontent p {
   font-size:10px;
   margin-left:0px;
   }

</style> </head><body>

2 columns

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. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. 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. this is a test. this is a test. 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>

2-column with relative positioned right column

   <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> <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>

Left Column

Right Column

</body> </html>

</source>

2-column with total width 922 px and left column 678 px, float 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> <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>

this is a test. this is a test. this is a test.

 this is a test. this is a test. this is a test. 
 this is a test. this is a test. this is a test. this is a test. this is a test. 
 this is a test. this is a test. this is a test. this is a test. this is a test. 
 this is a test. this is a test. this is a test. this is a test. this is a test. ]this is a test.

Right Column

</body> </html>

</source>

2-column with total width 922px, left width 200px, float 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> <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>

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.

this is a test. this is a test. this is a test.

 this is a test. this is a test. this is a test. this is a test. 
 this is a test. this is a test. this is a test. this is a test. 
 this is a test. this is a test. this is a test. this is a test. 
 this is a test. this is a test. 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>

Floated Two 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 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>

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.

</body> </html>

</source>

Floated Two-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 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>

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.

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.

</body> </html>

</source>

float left and right with other content

   <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;
               }
               p#right {
                   float: right;
               }
           </style>
       </head>
       <body>

This is the text of the first 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.

       </body>
   </html>
</source>

Head and footer with two columns in between

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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>

This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.

Navigation

<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.

</body> </html>

</source>

Header and sub header with two columns and 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 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">

Header 2

this is a test. this is a test. this is a test.

</body> </html>

</source>

Header and two-column layout

   <source lang="html4strict">

<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <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>

Cascading Style Sheets

<a href="">Examples index</a>

CSS Positioning

this is a test. this is a test.

Normal flow
Absolute positioning
Floating

</body> </html>

</source>

Header bar, two columns, menu on the right

   <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">

 <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>

Lorem ipsum

 this is a test. this is a test. this is a test. this is a test. this is a test. 
 this is a test. this is a test. this is a test. this is a test. this is a test. 
 this is a test. this is a test. this is a test. this is a test. this is a test. 
 this is a test. this is a test. this is a test. this is a test. this is a test. 
 this is a test. this is a test. this is a test. this is a test. this is a test.

 this is a test. this is a test. this is a test. this is a test. this is a test. 
 this is a test. this is a test. this is a test. this is a test. this is a test. 
 this is a test. this is a test. this is a test. this is a test. this is a test. 
 this is a test. this is a test. this is a test. this is a test. 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>

Master header and two columns

   <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">

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>

   <a href="">one</a>
   <a href="">two</a>
   <a href="">three</a>
   <a href="">four</a>

Item One

Lorem ipsum dolor sit amet.

Item Two

Lorem ipsum dolor sit amet.

</body> </html>

</source>

Two column: content and right bar

   <source lang="html4strict">

<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>

Right Side

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 :

Content Area

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.

Footer

</body> </html>

</source>

Two Column Layout in 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">

 <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>

        <a href="">Home</a>
<a href="">Products</a>
<a href="">Services</a>
<a href="">About Us</a>
<a href="">Contact Us</a>

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>

Two columns

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

   <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>

               Left side column.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu

   </body>

</html>

</source>

Two Columns Layout Using 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">

 <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>

       <a href="">Home</a>
<a href="">Products</a>
<a href="">Services</a>
<a href="">About Us</a>
<a href="">Contact Us</a>

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>

Two columns with a footer

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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>

Header Header Header Header Header

This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.

Navigation

<a href="">Q</a>
<a href="">N</a>
<a href="">C</a>
<a href="">D</a>
<a href="">R</a>

</body> </html>

</source>

Two columns with background

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

newsColumn,#infoColumn {

 float: left;
 width: 250px;

}

newsColumn {

 background-color: #ccc;

}

infoColumn {

 background-color: #999;

}

newsColumnContent,#infoColumnContent {

 padding: 10px;

}

footer {

 clear: both;

} </style> </head> <body>

News

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.

Information

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.

</body> </html>

</source>

Two columns with header and footer

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

   <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>

Heading

               Left side column.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu

   </body>

</html>

</source>

Two columns with header banner

   <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" /> <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>

this is a test.
this is a test.
this is a test.
this is a test.
this is a test.

header

By

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Duis autem vel eum iriure:

header 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Duis autem vel eum iriure:

E
L
E

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Duis autem vel eum iriure.

Take Off that Smoking Jacket and Put on Those Overalls

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Duis autem vel eum iriure.

From Herbal Tea to Compost Tea

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat. Duis autem vel eum iriure:

</body> </html>

</source>

Two columns with separator

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   <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>

News

this is a test.

Information

this is a test. this is a test. this is a test. this is a test. this is a test.

</body> </html>

</source>

Two columns with width: 50%

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   <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>

News

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.

Information

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.

</body> </html>

</source>

Two column with negative margin

   <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>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>

this is a test. 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>

Two row layout: one floats left, one floats right

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <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">

Content

</body> </html>

</source>

HTML/CSS/Layout/Two columns

Содержание

2-column layout with margin in between

2-column Layout with total width 922px, and float right

2-column, with float left and right, left 678px width

2 column with left content floats left

2 columns

leftcontent

rightcontent

2-column with relative positioned right column

2-column with total width 922 px and left column 678 px, float right

2-column with total width 922px, left width 200px, float right

Floated Two Column Layout

Branding

Lorem ipsum dolor

Ea commodo consequat

Magna aliquam erat volutpat

Floated Two-Column Layout 2

Branding

Lorem ipsum dolor

Ea commodo consequat

Ea commodo consequat

float left and right with other content

Head and footer with two columns in between

Header

Navigation

Header and sub header with two columns and footer

Header

Header 2

Header and two-column layout

Cascading Style Sheets

CSS Positioning

Header bar, two columns, menu on the right

Lorem ipsum

Master header and two columns

Masthead

Item One

Item Two

Two column: content and right bar

Right Side

Content Area

Two Column Layout in HTML with table

My Company Name

Sample Web Page

Two columns

Lorem Ipsum

Two Columns Layout Using CSS

My Company Name

Sample Web Page

Two columns with a footer

Header Header Header Header Header

Navigation

Two columns with background

News

Information

Two columns with header and footer

Heading

Lorem Ipsum

Two columns with header banner

header

header 2

Take Off that Smoking Jacket and Put on Those Overalls

From Herbal Tea to Compost Tea

Two columns with separator

News

Information

Two columns with width: 50%

News

Information

Two column with negative margin

Two row layout: one floats left, one floats right

Content

Sidebar

Footer

Навигация

Поиск