Three Column Layout in CSS 2

 

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>Three Column Layout in CSS</title>
<style type='text/css'>
body {
  background-color:#efefef;
  font-family:arial, verdana, sans-serif;
  margin:0; padding:0;}

.header {position:absolute; top:0px; left:0px; width:100%; background-color:#f3f3f3; height:60px;}

.nav {
  position:absolute;
  left:0px; top:60px;
  width:100px;
  font-weight:bold; 
  background-color:#e3e3e3; 
  padding:5px; 
  height:30em;}

.content {
padding-top:40px;
margin-left: 208px;
margin-right:208px;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 205px;
margin-right:205px;  }

html>body .content {
margin-left: 205px;
margin-right:205px;  }

.right {
  position:absolute;
  right:0px; top:60px;
  font-weight:bold; 
  background-color:#e3e3e3; 
  padding:5px; 
  width:100px;}
</style>

  </head> 
  <body leftmargin="0" topmargin="0">
      <div class="header"><h2>My Company Name</h2></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="right">This is the third column with some content here. </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>

<p>Mauris quis urna. Donec sodales, risus non dictum ultricies, nisl lorem imperdiet sapien, vel euismod orci risus non lorem. Nam tempus, pede nec tincidunt lacinia, lectus mauris malesuada quam, a tincidunt elit justo a ligula. Nunc cursus nonummy nulla. Quisque adipiscing. Donec nisl elit, viverra in, elementum eu, auctor id, eros. Sed sagittis, neque vel blandit tempor, justo odio posuere nulla, at condimentum lorem nibh suscipit arcu. Mauris rhoncus, nunc vel hendrerit aliquet, purus velit iaculis mauris, aliquam eleifend ante augue ut velit. Pellentesque sed turpis vel odio varius posuere. Ut urna mi, ultricies ut, lobortis in, varius porta, nulla. </p>
      </div>
  </body>
</html>

Related examples in the same category

1.	Header and three columns under
2.	Column left, column main, column right
3.	Three columns with navigation on the right
4.	Use left property to control the column position
5.	three column layout with header and footer
6.	Three column layout with absolute position
7.	Use absolute position to create header and three column under it
8.	Use margin to layout the center column
9.	Three columns, left and right column has abolute position
10.	3 columns, all fluid
11.	3 column
12.	3 Column fluid layout: 50% column, 2 x 25% columns
13.	3 column fluid layout - 33% columns
14.	3 Column fluid layout - 25% side columns
15.	Three Column Elastic Layout
16.	Floated Three Column Layout
17.	Three Column Hybrid Layout
18.	Three Column Liquid Layout
19.	Floated Three Column Layout 2
20.	Faux Three Column Liquid Layout
21.	Three-Column Layout Demonstration with Javascript
22.	Three-Column Layout Demonstration with fixed width
23.	Three-Column Layout without footer
24.	Three-Column Layout with absolute position
25.	Three columns: all floating from left
26.	Header and sub header with three columns
27.	Three columns with header and footer
28.	Three columns with no header and footer
29.	Three column layout with sub sections
30.	float left and right three columns
31.	Top and left navigational bar and three columns
32.	Three Column Layout in CSS
33.	Three Column Design Using HTML with Table
34.	Basic 3-Column Sample Page
35.	Three column with top section
36.	Three column layout with two sidebar on the right
37.	Three column layout with two column sidebar on the left
38.	Three column layout
39.	Fixed Three-Column Over Four-Column Layout
40.	Three column layout with content in the middle
41.	Three column layout with left navigation bar
42.	Three column layout with left menu bar
43.	Three column daliy post layout
44.	Three column layout
45.	Column span for three column layout
46.	Three column layout with top bar
47.	Three-column layout with various style illustration

Three Column Layout in CSS 2 : three Columns « Layout « HTML / CSS

Related examples in the same category