one_two_three : Design 6 « Templates « HTML / CSS






one_two_three

   

<!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>FREE TWO COLUMN CSS TEMPLATE</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
* { 
padding : 0;
margin : 0;
} 
body { 
font-family : Arial, Helvetica, sans-serif;
color : #666666;
font-size : 12px;
background-color : #f2efde;
} 
#wrapper { 
width : 870px;
margin : 0 auto;
background-image : url(one_two_three-images/topbg.jpg);
background-repeat : repeat-x;
background-color : #fff;
} 
img { 
padding : 3px;
border : 1px solid #caff7a;
margin-left : 10px;
margin-top : 5px;
} 
.green { 
color : #1aff00;
} 
.blue { 
color : #0099ff;
} 
.header { 
color : #0099ff;
} 
#header h1 { 
font-size : 1.9em;
margin-left : 70px;
font-family : "courier new";
width : 180px;
font-weight : bolder;
} 
#header h3 { 
font-size : 1em;
margin-left : 70px;
font-family : "courier new";
width : 180px;
} 
.navbar { 
position : relative;
display : block;
height : 24px;
font-size : 11px;
font-weight : bold;
font-family : Arial, Verdana, Helvitica, sans-serif;
} 
.navbar ul { 
padding : 0;
list-style-type : none;
width : auto;
margin-left : 330px;
margin-top : -24px;
} 
.navbar ul li { 
display : block;
float : left;
margin : 0 1px 0 0;
} 
.navbar ul li a { 
display : block;
float : left;
color : #0099ff;
text-decoration : none;
padding : 6px 20px 0 20px;
height : 24px;
} 
.navbar ul li a:hover, .navbar ul li a.current { 
color : #1aff00;
background : transparent url(one_two_three-images/bgON.gif) repeat-x top left;
} 
#top { 
background-image : url(one_two_three-images/topbg.jpg);
background-repeat : repeat-x;
height : 27px;
} 
#header { 
height : 70px;
background-color : #fff;
background-image : url(one_two_three-images/logo.jpg);
background-repeat : no-repeat;
border-bottom : solid #f4f4f4;
padding-left : 30px;
padding-right : 30px;
background-position : 30px 0%;
padding-top : 5px;
} 
#toptext { 
margin-top : 15px;
background-color : #fff;
padding-left : 30px;
padding-right : 30px;
padding-bottom : 2px;
} 
#toptext a { 
color : #80b86a;
text-decoration : none;
font-family : Arial, Verdana, Helvitica, sans-serif;
border : 1px solid;
padding-top : 1px;
padding-bottom : 1px;
padding-left : 3px;
padding-right : 3px;
margin-left : 730px;
font-size : 0.8em;
color: #80b86a;} 
#toptext p { 
font-family : Arial, Verdana, Helvitica, sans-serif;
font-size : 1em;
text-align : justify;
padding-top : 5px;
padding-bottom : 5px;
padding-left : 10px;
padding-right : 10px;
line-height : 1.5em;
} 
#leftcolumn { 
display : inline;
width : 275px;
float : left;
background-color : #fff;
min-height : 621px;
} 
* html #leftcolumn { 
height : 621px;
} 
#leftcolumn h2 { 
font-family : "courier new";
font-size : 1.8em;
color : #0099ff;
padding-left : 35px;
} 
#leftcolumn h3 { 
padding-left : 35px;
font-family : "courier new";
font-size : 1.1em;
text-decoration : underline;
color : #80b86a;
} 
#leftcolumn p { 
font-family : Arial, Helvetica, sans-serif;
font-size : 0.9em;
text-align : justify;
padding-left : 35px;
padding-right : 10px;
margin-top : 1em;
margin-bottom : 1em;
} 
#leftcolumn a { 
color : #80b86a;
float : right;
padding-right : 10px;
margin-top : -17px;
} 
#leftcolumn img { 
float : right;
margin-right : 7px;
margin-top : 15px;
margin-bottom : 15px;
} 
#rightcolumn { 
margin : 0 0 0 0;
padding-right : 30px;
display : inline;
width : 565px;
float : left;
min-height : 621px;
background-color : #fff;
} 
* html #rightcolumn { 
height : 621px;
} 
#rightcolumn h2 { 
font-family : "courier new";
font-size : 1.8em;
color : #0099ff;
padding-left : 10px;
padding-top : 10px;
} 
#rightcolumn p { 
padding-left : 10px;
} 
.clear { 
clear : both;
} 
#boxes { 
margin-right : 30px;
margin-top : 5px;
} 
.box { 
width : 250px;
border : 1px solid #caff7a;
margin : 8px 0 10px 15px;
float : left;
padding-bottom : 5px;
} 
.box p { 
color : #333;
text-align : justify;
padding-left : 10px;
padding-right : 10px;
padding-top : 10px;
} 
.box ul { 
margin-left : 40px;
line-height : 18px;
padding-top : 10px;
} 
.box li { 
list-style-type : none;
color: #80b86a;
font-weight: bold;
font-style: italic;} 
.box a { 
padding-left : 5px;
color : #80b86a;
text-decoration : none;
} 
#footer { 
background-color : #e2e2e2;
display : inline;
float : left;
padding-top : 5px;
padding-bottom : 5px;
text-align : center;
display : inline;
float : left;
width : 100%;
border-top : 2px solid #ccc;
} 
#footer p { 
font-size : 0.8em;
color : #0099ff;
} 
#footer a { 
font-size : 0.8em;
color : #80b86a;
} 

</style>


</head>

<body>
<div id="wrapper">
   <div id="top">
   
   </div>

   <div id="header">
  <h1 class="header"><span class="blue">Free</span><br /><span class="green">Template</span></h1>
  <h3 class="header">by:<a href="http://www.getcsstemplates.com/">Get Free CSS Templates</a></h3>
   <div class="navbar">
       <ul>
              <li><a href="http://www.getcsstemplates.com" title="Free CSS Templates" class="current">Free CSS</a></li>
              <li><a href="#" title="">Link Two</a></li>
              <li><a href="#" title="">Link Three</a></li>
              <li><a href="#" title="">Link Four</a></li>
              <li><a href="#" title="">Link Five</a></li>
        </ul>
   </div>
   </div>
   
   <div id="toptext">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut eget augue in velit elementum bibendum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis...</p>
<a href="#">read more</a>
   </div>
   
   
   <div id="leftcolumn"> 
     <h2>Lorem Ipsum</h2>
     <h3>consectetuer adipiscing elit</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
     <h3>Donec rutrum neque eu nisl. Morbi eget felis</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut eget augue in velit elementum bibendum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis...</p>
<a href="#">read more</a>
      <img src="one_two_three-images/img1.jpg" alt="image 1"/>
<h3>Donec rutrum neque eu nisl. Morbi eget felis</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna.</p>
<a href="#">read more</a>
   </div>
   
   <div id="rightcolumn">

      <img src="one_two_three-images/signal.jpg" alt="signal"/>
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
<div class="clear"></div>
    
                      <div id="boxes">
      
      <div class="box">
           <h2>Lorem Ipsum</h2>
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque.  </p>
        <ul>
        
          <li><a href="#">Lorem ipsum dolor sit amet</a></li>
          <li><a href="#">Lorem ipsum dolor sit amet</a></li>
          <li><a href="#">Lorem ipsum dolor sit amet</a></li>
          <li><a href="#">Lorem ipsum dolor sit amet</a></li>
          <li><a href="#">Lorem ipsum dolor sit amet</a></li>
        </ul>  
             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. </p>
             <a href="#">read more</a>
      </div>
      
      <div class="box">
           <h2>Lorem Ipsum</h2>
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque. </p>
        <ul>
        
          <li><a href="#">Lorem ipsum dolor sit amet</a></li>
          <li><a href="#">Lorem ipsum dolor sit amet</a></li>
          <li><a href="#">Lorem ipsum dolor sit amet</a></li>
          <li><a href="#">Lorem ipsum dolor sit amet</a></li>
          <li><a href="#">Lorem ipsum dolor sit amet</a></li>
        </ul>  
             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl.</p>
             <a href="#">read more</a>
      </div>
                       </div>

<div class="clear"></div>
   </div>
   <div id="footer"> <p><a href="http://validator.w3.org/">Valid XHTML</a>  Copyright &copy; 2007 by Free CSS Templates and Layouts :: Designed by: <a href="http://www.getcsstemplates.com"title="free css templates and layouts">GET FREE CSS TEMPLATES</a> </p> </div>
   
</div>
   
</body>
</html>

   
    
    
  








Related examples in the same category

1.newave
2.newdarkside
3.newday
4.newera
5.newfangled
6.newgreeny
7.newgreys
8.newhorizon
9.news portal
10.news-print
11.newsbeat
12.newsflash
13.newsportal
14.newsroll
15.newstheme
16.newwave-business-inc
17.new_rise
18.NiceSite
19.nimbuslike
20.nixed
21.noimages
22.noname1
23.nonzero
24.nothingfanzy
25.nourish
26.nowhere
27.NuahSwirl
28.nullbullum
29.numerology
30.o-no-typography
31.obsess
32.obsession
33.obtanium
34.office-plants
35.offlimits
36.offrecord
37.oheon_com_110100021
38.ohgreenworld
39.Okeanos
40.old-wall
41.oldarchitecture
42.Olive
43.one-penny
44.online-edu
45.onlinemoviestore
46.oodles
47.openyourwindows
48.opposed
49.optimal-touch
50.orchidaceae
51.ordinaire
52.ormeggiare
53.ornamental
54.ornate
55.OrngBlu
56.oswd_blozilla
57.our-work
58.ourhouse
59.outdoorv1.0
60.outliers
61.outoftheblue
62.outtabox
63.oxidation
64.package
65.paddy-harvest
66.pagedrape
67.paivi-k
68.paleforest
69.palmtrees
70.pamphlet
71.pancorbo
72.papira
73.paradigm
74.paradise1983
75.parchmenter
76.particle
77.particles
78.pastel
79.pastelco
80.pastelflowers
81.pastries
82.path-fider
83.patternmaker
84.PattyMcFatPat01
85.PattyMcFatPat03
86.pc
87.Pear Template
88.pear
89.pedestrian
90.penchantforphotos
91.pencilpink
92.people
93.perfectblemish
94.performance
95.perplex
96.personified
97.pillars
98.pills
99.pinnacle
100.Pistachio
101.pixabella
102.pixabella04
103.pixabella06
104.pixelationingreen
105.plaidshirt
106.plainandsimple
107.planning-feed
108.pluralism
109.plurkified
110.pointspace
111.pollinate
112.pollinating
113.pollination