GoFlexible : Design 5 « Templates « HTML / CSS






  1. HTML / CSS
  2. Templates
  3. Design 5

GoFlexible

    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <meta name="description" content="Your description goes here" />
  <meta name="keywords" content="your,keywords,goes,here" />
  <meta name="author" content="Your Name / Original design: Gerhard Erbes - gw@actamail.com/" />
<style type='text/css'>
/*****************************************************/
/*   Author:  Gerhard Erbes                          */
/*            gw@actamail.com                        */
/*   Version: 5.0                                    */
/*   Date:    March 14, 2006                         */
/*****************************************************/

/*****************/
/*   MAIN BODY   */
/*****************/
body {
  font-size: 62.5%;
  margin: 0em auto;
  padding: 0em;
  background: url(GoFlexible-img/img_background.gif) top center repeat-y;
    font-family: Verdana,Tahoma, Arial,sans-serif;
}

#wrap {
  width: 76em;
  margin: 0em auto;
}

/**************/
/*   HEADER   */
/**************/
#header-section {
  width: 76em;
  margin: 0em 0em 0em 0em;
}

#header-background {
  width: 100%; 
  height: 100%;
  float: left;
  border: none;
  margin: 0em 0em 0em 0em;
}

#header-background-left {
  width: 14.5em;
  float: left;
  margin: 0em 0em 0em 0em;
  padding: 0em 0em 0em 0em;
  border: none;
}

#header-background-right {
  width: 61.5em;
  float: right;
  margin: 0em 0em 0em 0em;
  padding: 0em 0em 0em 0em;
  border: none;
}

#header {
  clear: both;
  margin: 0em 0em 1.5em 0em;
  border-top: solid 0.1em rgb(175,175,175);
  border-bottom: solid 0.1em rgb(175,175,175);
  background-color: rgb(235,235,235);  
  text-transform: uppercase;
  line-height: 2.0em;
  height: 2.0em;
  color: rgb(50,50,50);
}

#header ul {  
  margin: 0em;
  padding: 0em;
  list-style: none;
  font-weight: bold;
  font-size: 1.0em;
}  

#header li {
  float: left;
  white-space: nowrap;
}

#header li a {
  display: block;
  padding: 0em 1.0em 0em 1.0em;
  border-right: solid 0.1em rgb(175,175,175);  
  background-color: rgb(235,235,235);  
  text-decoration: none;
  color: rgb(50,50,50);
}

#header a:hover {
  border-right: solid 0.1em rgb(175,175,175);  
  background-color: rgb(220,220,220);      
  text-transform: uppercase;
  text-decoration: none;
  color: rgb(50,50,50);
}

#header .selected {
  padding: 0em 0.5em 0em 0.5em;
  border-right: solid 0.1em rgb(175,175,175);    
  background-color: rgb(220,220,220);
  color: rgb(50,50,50);
}

* html #header a {width:1%;}

/***********************/
/***   LEFT COLUMN   ***/
/***********************/
#left-column {
  width: 20%;
  float: left;
  vertical-align: top;
  background-color: rgb(255,255,255);
  font-size: 1.1em;
  color: rgb(50,50,50);
}

#left-column ul {  
  width: 95%;
  padding: 0em;
  margin: 0em;
  list-style: none;
}  

#left-column li {
  margin: 0em 0em 0em 0em;
}

#left-column li a {
  display: block;
  padding: 0.3em 0.7em 0.2em 1.2em;
  border-left: solid 0.5em rgb(235,235,235);
  border-top: solid 0.1em rgb(200,200,200);
  background-color: rgb(235,235,235);
  text-decoration: none;
  font-weight: normal;
  color: rgb(50,50,50);
  height: 1.3em;
}  
  
#left-column a:hover {
  border-left: solid 0.5em rgb(175,175,175);
  background-color: rgb(220,220,220);
  text-decoration: none;
  color: rgb(50,50,50);
}

#left-column .selected {
  display: block;
  padding: 0.3em 0.7em 0.2em 1.2em;
  border-left: solid 0.5em rgb(175,175,175);
  border-top: solid 0.1em rgb(200,200,200);
  background-color: rgb(220,220,220);
  font-weight: normal;
  color: rgb(50,50,50);
}

#left-column .left-navheader-first {
  display: block;
  margin: 0em 0em 1.0em 0em;
  padding: 0.3em 0.7em 0.3em 0.9em;
  border-left: solid 0em rgb(255,210,113);
  background-color: rgb(220,220,220);
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  color: rgb(50,50,50);
}

#left-column .left-navheader {
  display: block;
  margin: 1.0em 0em 0em 0em;
  padding: 0.3em 0.7em 0.2em 0.4em;
  border-left: solid 0.5em rgb(235,235,235);
  background-color: rgb(220,220,220);
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  color: rgb(50,50,50);
}

/*************************/
/***   MIDDLE COLUMN   ***/
/*************************/

/* Sections */
/************/
#middle-column {
  float: left;
  width: 57.5%;
  padding: 0em 0.6em 0em 0.7em;
  background-color: rgb(255,255,255);
  color: rgb(100,100,100);
  line-height: 1.3em;
  font-size: 1.2em;
}

.middle-column-left {
  float: left;
  width: 47.75%;
}

.middle-column-right {
  float: right;
  width: 47.75%;
}

/* Box titlebars */
/*****************/
.middle-column-box-title-grey {
  clear: both;
  display: block;
  margin: 0em 0em 0.5em 0em;
  padding: 0.2em 0em 0.2em 0.3em;
  background-color: rgb(220,220,220);
  font-weight: bold;
  color: rgb(50,50,50);
}

.middle-column-box-title-blue {
  clear: both;
  display: block;
  margin: 0em 0em 0.5em 0em;
  padding: 0.2em 0em 0.2em 0.3em;
  background-color: rgb(187,211,247);
  font-weight: bold;
  color: rgb(50,50,50);
}

.middle-column-box-title-yellow {
  clear: both;
  display: block;
  margin: 0em 0em 0.5em 0em;
  padding: 0.2em 0em 0.2em 0.3em;
  background-color: rgb(255,236,128);    
  font-weight: bold;
  color: rgb(50,50,50);
}

.middle-column-box-title-green {
  clear: both;
  display: block;
  margin: 0em 0em 0.5em 0em;
  padding: 0.2em 0em 0.2em 0.3em;
  background-color: rgb(196,221,108);      
  font-weight: bold;
  color: rgb(50,50,50);
}

.middle-column-box-title-red {
  clear: both;
  display: block;
  margin: 0em 0em 0.5em 0em;
  padding: 0.2em 0em 0.2em 0.3em;
  background-color: rgb(255,176,176);
  font-weight: bold;
  color: rgb(50,50,50);
}

/* Box backgrounds */
/*******************/

/* Box backgrounds -  Full width boxes */
/***************************************/
.middle-column-box-white {
  float: left;
  width: 100%;
  margin: 0em 0em 1.5em 0em;
  padding: 0em 0em 0em 0em;
}

.middle-column-box-blue {
  float: left;
  width: 100%;
  margin: 0em 0em 1.5em 0em;
  padding: 0em 0em 0em 0em;
  background-color: rgb(187,211,247);
}

.middle-column-box-yellow {
  float: left;
  width: 100%;
  margin: 0em 0em 1.5em 0em;
  padding: 0em 0em 0em 0em;
  background-color: rgb(255,240,170);
}

.middle-column-box-green {
  float: left;
  width: 100%;
  margin: 0em 0em 1.5em 0em;
  padding: 0em 0em 0em 0em;
  background-color: rgb(224,244,181);
}

.middle-column-box-red {
  float: left;
  width: 100%;
  margin: 0em 0em 1.5em 0em;
  padding: 0em 0em 0em 0em;
  background-color: rgb(255,219,219);
}

/* Box backgrounds -  Half width boxes */
/**************************************/
.middle-column-box-left-white {
  float: left;
  width: 98%;
  margin: 0em 0em 1.5em 0em;
  padding: 0em 0em 0em 0em;
}

.middle-column-box-left-blue {
  float: left;
  width: 98%;
  margin: 0em 0em 1.5em 0em;
  padding: 0em 0em 0em 0em;
  background-color: rgb(226,238,252);
}

.middle-column-box-left-yellow {
  float: left;
  width: 98%;
  margin: 0em 0em 1.5em 0em;
  padding: 0em 0em 0em 0em;
  background-color: rgb(255,240,170);
}

.middle-column-box-left-green {
  float: left;
  width: 98%;
  margin: 0em 0em 1.5em 0em;
  padding: 0em 0em 0em 0em;
  background-color: rgb(215,244,181);
}

.middle-column-box-left-red {
  float: left;
  width: 98%;
  margin: 0em 0em 1.5em 0em;
  padding: 0em 0em 0em 0em;
  background-color: rgb(255,219,219);
}

.middle-column-box-right-white {
  float: right;
  width: 98%;
  margin: 0em 0em 1.5em 0em;
  padding: 0em 0em 0em 0em;
}

.middle-column-box-right-blue {
  float: right;
  width: 98%;
  margin: 0em 0em 1.5em 0em;
  padding: 0em 0em 0em 0em;
  background-color: rgb(226,238,252);
}

.middle-column-box-right-yellow {
  float: right;
  width: 98%;
  margin: 0em 0em 1.5em 0em;
  padding: 0em 0em 0em 0em;
  background-color: rgb(255,240,170);
}

.middle-column-box-right-green {
  float: right;
  width: 98%;
  margin: 0em 0em 1.5em 0em;
  padding: 0em 0em 0em 0em;
  background-color: rgb(224,244,181);
}

.middle-column-box-right-red {
  float: right;
  width: 98%;
  margin: 0em 0em 1.5em 0em;
  padding: 0em 0em 0em 0em;
  background-color: rgb(255,219,219);
}

/* Text headings and paragraphs */
/********************************/
.middle-column-box-white p.heading {
  margin: 1.0em 0em 1.0em 0em;
  font-weight: bold;
  font-size: 1.2em;
}

.middle-column-box-white p.subheading {
  margin: 1.0em 0em 0.6em 0em;  
  font-weight: bold;
}

.middle-column-box-white p {
  margin: 0em 0em 0.6em 0em;
}

.middle-column-box-blue p.heading {
  margin: 1.0em 0em 1.0em 0em;
  padding: 0em 1.0em 0em 0.8em;
  font-weight: bold;
  font-size: 1.2em;
}

.middle-column-box-blue p.subheading {
  margin: 1.0em 0em 0.6em 0em;
  padding: 0em 1.0em 0em 0.8em;
  font-weight: bold;
}

.middle-column-box-blue p {
  margin: 0em 0em 0.6em 0em;
  padding: 0em 1.0em 0em 0.8em;
}

.middle-column-box-yellow p.heading {
  margin: 1.0em 0em 1.0em 0em;
  padding: 0em 1.0em 0em 0.8em;
  font-weight: bold;
  font-size: 1.2em;
}

.middle-column-box-yellow p.subheading {
  margin: 1.0em 0em 0.6em 0em;
  padding: 0em 1.0em 0em 0.8em;
  font-weight: bold;
}

.middle-column-box-yellow p {
  margin: 0em 0em 0.6em 0em;
  padding: 0em 1.0em 0em 0.8em;
}

.middle-column-box-green p.heading {
  margin: 1.0em 0em 1.0em 0em;
  padding: 0em 1.0em 0em 0.8em;
  font-weight: bold;
  font-size: 1.2em;
}

.middle-column-box-green p.subheading {
  margin: 1.0em 0em 0.6em 0em;
  padding: 0em 1.0em 0em 0.8em;
  font-weight: bold;
}

.middle-column-box-green p {
  margin: 0em 0em 0.6em 0em;
  padding: 0em 1.0em 0em 0.8em;
}

.middle-column-box-red p.heading {
  margin: 1.0em 0em 1.0em 0em;
  padding: 0em 1.0em 0em 0.8em;
  font-weight: bold;
  font-size: 1.2em;
}

.middle-column-box-red p.subheading {
  margin: 1.0em 0em 0.6em 0em;
  padding: 0em 1.0em 0em 0.8em;
  font-weight: bold;
}

.middle-column-box-red p {
  margin: 0em 0em 0.6em 0em;
  padding: 0em 1.0em 0em 0.8em;
}

.middle-column-box-left-white p.heading {
  margin: 1.0em 0em 1.0em 0em;
  font-weight: bold;
  font-size: 1.2em;
}

.middle-column-box-left-white p.subheading {
  margin: 1.0em 0em 0.6em 0em;
  font-weight: bold;
}

.middle-column-box-left-white p {
  margin: 0em 0em 0.6em 0em;
}

.middle-column-box-left-blue p.heading {
  margin: 1.0em 0em 1.0em 0em;
  padding: 0em 1.0em 0em 0.8em;
  font-weight: bold;
  font-size: 1.2em;
}

.middle-column-box-left-blue p.subheading {
  margin: 1.0em 0em 0.6em 0em;
  padding: 0em 1.0em 0em 0.8em;
  font-weight: bold;
}

.middle-column-box-left-blue p {
  margin: 0em 0em 0.6em 0em;
  padding: 0em 1.0em 0em 0.8em;
}

.middle-column-box-left-yellow p.heading {
  margin: 1.0em 0em 1.0em 0em;
  padding: 0em 1.0em 0em 0.8em;
  font-weight: bold;
  font-size: 1.2em;
}

.middle-column-box-left-yellow p.subheading {
  margin: 1.0em 0em 0.6em 0em;
  padding: 0em 1.0em 0em 0.8em;
  font-weight: bold;
}

.middle-column-box-left-yellow p {
  margin: 0em 0em 0.6em 0em;
  padding: 0em 1.0em 0em 0.8em;
}

.middle-column-box-left-green p.heading {
  margin: 1.0em 0em 1.0em 0em;
  padding: 0em 1.0em 0em 0.8em;
  font-weight: bold;
  font-size: 1.2em;
}

.middle-column-box-left-green p.subheading {
  margin: 1.0em 0em 0.6em 0em;
  padding: 0em 1.0em 0em 0.8em;  
  font-weight: bold;
}

.middle-column-box-left-green p {
  margin: 0em 0em 0.6em 0em;
  padding: 0em 1.0em 0em 0.8em;
}

.middle-column-box-left-red p.heading {
  margin: 1.0em 0em 1.0em 0em;
  padding: 0em 1.0em 0em 0.8em;
  font-weight: bold;
  font-size: 1.2em;
}

.middle-column-box-left-red p.subheading {
  margin: 1.0em 0em 0.6em 0em;
  padding: 0em 1.0em 0em 0.8em;
  font-weight: bold;
}

.middle-column-box-left-red p {
  margin: 0em 0em 0.6em 0em;
  padding: 0em 1.0em 0em 0.8em;
}

.middle-column-box-right-white p.heading {
  margin: 1.0em 0em 1.0em 0em;
  font-weight: bold;
  font-size: 1.2em;
}

.middle-column-box-right-white p.subheading {
  margin: 1.0em 0em 0.6em 0em;
  font-weight: bold;
}

.middle-column-box-right-white p {
  margin: 0em 0em 0.6em 0em;
}

.middle-column-box-right-blue p.heading {
  margin: 1.0em 0em 1.0em 0em;
  padding: 0em 1.0em 0em 0.8em;  
  font-weight: bold;
  font-size: 1.2em;
}

.middle-column-box-right-blue p.subheading {
  margin: 1.0em 0em 0.6em 0em;
  padding: 0em 1.0em 0em 0.8em;  
  font-weight: bold;
}

.middle-column-box-right-blue p {
  margin: 0em 0em 0.6em 0em;
  padding: 0em 1.0em 0em 0.8em;  
}

.middle-column-box-right-yellow p.heading {
  margin: 1.0em 0em 1.0em 0em;
  padding: 0em 1.0em 0em 0.8em;
  font-weight: bold;
  font-size: 1.2em;
}

.middle-column-box-right-yellow p.subheading {
  margin: 1.0em 0em 0.6em 0em;
  padding: 0em 1.0em 0em 0.8em;
  font-weight: bold;
}

.middle-column-box-right-yellow p {
  margin: 0em 0em 0.6em 0em;
  padding: 0em 1.0em 0em 0.8em;
}

.middle-column-box-right-green p.heading {
  margin: 1.0em 0em 1.0em 0em;
  padding: 0em 1.0em 0em 0.8em;
  font-weight: bold;
  font-size: 1.2em;
}

.middle-column-box-right-green p.subheading {
  margin: 1.0em 0em 0.6em 0em;
  padding: 0em 1.0em 0em 0.8em;
  font-weight: bold;
}

.middle-column-box-right-green p {
  margin: 0em 0em 0.6em 0em;
  padding: 0em 1.0em 0em 0.8em;
}

.middle-column-box-right-red p.heading {
  margin: 1.0em 0em 1.0em 0em;
  padding: 0em 1.0em 0em 0.8em;
  font-weight: bold;
  font-size: 1.2em;
}

.middle-column-box-right-red p.subheading {
  margin: 1.0em 0em 0.6em 0em;
  padding: 0em 1.0em 0em 0.8em;
  font-weight: bold;
}

.middle-column-box-right-red p {
  margin: 0em 0em 0.6em 0em;
  padding: 0em 1.0em 0em 0.8em;
}

/* Images */
/**********/
.middle-column-img-left{
  float: left;
  margin: 0.3em 0.5em 0em 0em;
  border: solid 1px rgb(100,100,100);
}

.middle-column-img-right{
  float: right;
  margin: 0.3em 0em 0em 0.5em;
  border: solid 1px rgb(100,100,100);  
}

/************************/
/***   RIGHT COLUMN   ***/
/************************/
#right-column {
  float: right;
  width: 20%;
  background-color: rgb(255,255,255);
  color: rgb(100,100,100);
  font-size: 1.1em;
}

.right-column-box-title-grey {
  clear: both;
  display: block;
   margin: 0em 0em 0.2em 0em;
  padding: 0.2em 0.2em 0.2em 0.2em;
  background-color: rgb(220,220,220);
  font-weight: bold;
  color: rgb(50,50,50);
}

.right-column-box-title-blue {
  clear: both;
  display: block;
   margin: 0em 0em 0.2em 0em;
  padding: 0.2em 0.2em 0.2em 0.2em;
  background-color: rgb(187,211,247);
  font-weight: bold;
  color: rgb(50,50,50);
}

.right-column-box-title-yellow {
  clear: both;
  display: block;
   margin: 0em 0em 0.2em 0em;
  padding: 0.2em 0.2em 0.2em 0.2em;
  background-color: rgb(255,236,128);  
  font-weight: bold;
  color: rgb(50,50,50);
}

.right-column-box-title-green {
  clear: both;
  display: block;
   margin: 0em 0em 0.2em 0em;
  padding: 0.2em 0.2em 0.2em 0.2em;
  background-color: rgb(196,221,108);
  font-weight: bold;
  color: rgb(50,50,50);
}
.right-column-box-title-red {
  clear: both;
  display: block;
   margin: 0em 0em 0.2em 0em;
  padding: 0.2em 0.2em 0.2em 0.2em;
  background-color: rgb(255,176,176);
  font-weight: bold;
  color: rgb(50,50,50);
}

.right-column-box-white {
  float: right;
  width: 91%;
  margin: 0em 0em 0.8em 0em;
  padding: 0.4em 0.4em 0.4em 0.4em;
  border: solid 0.1em rgb(200,200,200);
}  

.right-column-box-blue {
  float: right;
  width: 91%;
  margin: 0em 0em 0.8em 0em;
  padding: 0.4em 0.4em 0.4em 0.4em;
  border: solid 0.1em rgb(200,200,200);
  background-color: rgb(226,238,252);      
}  

.right-column-box-yellow {
  float: right;
  width: 91%;
  margin: 0em 0em 0.8em 0em;
  padding: 0.4em 0.4em 0.4em 0.4em;
  border: solid 0.1em rgb(200,200,200);
  background-color: rgb(255,240,170);      
}  

.right-column-box-green {
  float: right;
  width: 91%;
  margin: 0em 0em 0.8em 0em;
  padding: 0.4em 0.4em 0.4em 0.4em;
  border: solid 0.1em rgb(200,200,200);
  background-color: rgb(224,244,181);
}  

.right-column-box-red {
  float: right;
  width: 91%;
  margin: 0em 0em 0.8em 0em;
  padding: 0.4em 0.4em 0.4em 0.4em;
  border: solid 0.1em rgb(200,200,200);
  background-color: rgb(255,219,219);    
}  

.right-column-box-white p {
  margin: 0.3em 0em 0.4em 0em;
}

.right-column-box-blue p {
  margin: 0.3em 0em 0.4em 0em;
}

.right-column-box-yellow p {
  margin: 0.3em 0em 0.4em 0em;
}

.right-column-box-green p {
  margin: 0.3em 0em 0.4em 0em;
}

.right-column-box-red p {
  margin: 0.3em 0em 0.4em 0em;
}

.right-column-img{
  float: right;
  margin: 1.0em 0em 0em 0em;
  border: solid 1px rgb(100,100,100);
}

/*******************/
/***   FOOTER    ***/
/*******************/
#footer {
  clear: both;
  float: left;
  width: 76em;
  height: 2.5em;
  margin: 1.0em 0em 1.0em 0em;
  padding: 0.25em 0em 0.3em 0em;
  border-top: solid 0.1em rgb(150,150,150);
  border-bottom: solid 0.1em rgb(150,150,100);  
  background-color: rgb(220,220,220);
  text-align: center;
  color: rgb(100,100,100);
  font-size: 1.0em;
}

/**************************/
/***   MISCELLANEOUS    ***/
/**************************/
a:hover {
  color: rgb(10,106,245);
  text-decoration: none;
  background-color: rgb(255,255,255);
}


</style>


  <title>Go Flexible</title>
</head>

<body>
  <div id="wrap">

    <!-- HEADER -->
    <!-- Background -->
    <div id="header-section">
      <a href="#"><img id="header-background-left" src="./GoFlexible-img/img_logo.jpg" alt=""/></a>
      <img id="header-background-right" src="./GoFlexible-img/img_header.jpg" alt=""/>
    </div>

    <!-- Navigation -->
    <div id="header">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Menu Link 1</a></li>
        <li><a href="#">Menu Link 2</a></li>
        <li class="selected">Menu Link 3</li>
        <li><a href="#">Menu Link 4</a></li>  
        <li><a href="#">Menu Link 5</a></li>
      </ul>
    </div>

    <!-- LEFT COLUMN -->
    <!-- Navigation -->
    <div id="left-column">
      <ul>
        <li class="left-navheader-first">Menu 3</li>
        <li><a class="left-navheader" href="#">Menu link 3-1</a></li>
        <li><a href="#">Menu Link 3-1-1</a></li>
        <li><a href="#">Menu Link 3-1-2</a></li>
        <li><a href="#">Menu Link 3-1-3</a></li>
        <li><a class="left-navheader" href="#">Menu Link 3-2</a></li>
        <li><a href="#">Menu Link 3-2-1</a></li>
        <li><a href="#">Menu Link 3-2-2</a></li>
        <li><a href="#">Menu Link 3-2-3</a></li>
        <li><a class="left-navheader" href="#">Menu Link 3-3</a></li>
        <li><a href="#">Menu Link 3-3-1</a></li>
        <li class="selected">Menu Link 3-3-2</li>
        <li><a href="#">Menu Link 3-3-3</a></li>
        <li><a class="left-navheader" href="#">Menu Link 3-4</a></li>
        <li><a href="#">Menu Link 3-4-1</a></li>
        <li><a href="#">Menu Link 3-4-2</a></li>
        <li><a href="#">Menu Link 3-4-3</a></li>        
      </ul>
    </div>

    <!-- RIGHT COLUMN -->
    <div id="right-column">
      
      <!-- Right column box -->
      <div class="right-column-box-white">
        <div class="right-column-box-title-grey">Color options</div>
        <p>All boxes in the middle and right columns can vary colors for titles and backgrounds. See examples below. The colors for titles and backgrounds can be chosen independently.</p>        
      </div>
      
      <!-- Right column box -->
      <div class="right-column-box-white">
        <div class="right-column-box-title-grey">Grey title</div>
        <p>White background.</p>
      </div>
      
      <!-- Right column box -->
      <div class="right-column-box-white">
        <div class="right-column-box-title-blue">Blue title</div>
        <p>White background.</p>
      </div>
      
      <!-- Right column box -->
      <div class="right-column-box-white">
        <div class="right-column-box-title-yellow">Yellow title</div>
        <p>White background.</p>
      </div>

      <!-- Right column box -->
      <div class="right-column-box-white">
        <div class="right-column-box-title-green">Green title</div>
        <p>White background.</p>
      </div>
      
      <!-- Right column box -->
      <div class="right-column-box-white">
        <div class="right-column-box-title-red">Red title</div>
        <p>White background.</p>
      </div>
      
      <!-- Right column box -->
      <div class="right-column-box-blue">
        <div class="right-column-box-title-blue">Blue title</div>
        <p>Blue background.</p>
      </div>
      
      <!-- Right column box -->
      <div class="right-column-box-yellow">
        <div class="right-column-box-title-yellow">Yellow title</div>
        <p>Yellow background.</p>
      </div>

      <!-- Right column box -->
      <div class="right-column-box-green">
        <div class="right-column-box-title-green">Green title</div>
        <p>Green background.</p>
      </div>
      
      <!-- Right column box -->
      <div class="right-column-box-red">
        <div class="right-column-box-title-red">Red title</div>
        <p>Red background.</p>
      </div>      

      <!-- Right column box -->
      <div class="right-column-box-white">
        <div class="right-column-box-title-grey">Grey title</div>
        <p>Use this column for news, events, button links, further links, or whatever you want.</p>
        <p>Additional links:</p>                
        <p><a href="#">Link A</a></p>
        <p><a href="#">Link B</a></p>
        <p><a href="#">Link C</a></p>      
      </div>                        
    </div>

    <!-- MIDDLE COLUMN -->
    <div id="middle-column">
         
      <!-- Middle column full box -->
      <div class="middle-column-box-white">
        <div class="middle-column-box-title-grey">Grey title</div>
          <p><img src="./GoFlexible-img/img_general.jpg" class="middle-column-img-left" width="100" alt="" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Aliquam at libero</a>. Suspendisse non risus a diam convallis lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse non risus a diam convallis lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse non risus a diam convallis lobortis.</p>
          <p><a href="#">Read more</a></p>
      </div>
      
      <!-- Middle column left section -->
      <div class="middle-column-left">

        <!-- Middle column left box -->
        <div class="middle-column-box-left-white">
          <div class="middle-column-box-title-grey">Grey title</div>
          <p><img src="./GoFlexible-img/img_general.jpg" class="middle-column-img-left" width="50"  alt="" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Aliquam at libero</a>. Suspendisse non risus a diam convallis lobortis.</p>
          <p><a href="#">Read more</a></p>
        </div>
        
        <!-- Middle column left box -->
        <div class="middle-column-box-left-white">
          <div class="middle-column-box-title-grey">Grey title</div>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Aliquam at libero</a>. Suspendisse non risus a diam convallis lobortis.</p>
          <p><a href="#">Read more</a></p>
        </div>
      </div>    
    
      <!-- Middle column right section -->    
      <div class="middle-column-right">

        <!-- Middle column right box -->
        <div class="middle-column-box-right-white">
          <div class="middle-column-box-title-grey">Grey title</div>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Aliquam at libero</a>. Suspendisse non risus a diam convallis lobortis.</p>
        </div>

        <!-- Middle column right box -->
        <div class="middle-column-box-right-white">
          <div class="middle-column-box-title-grey">Grey title</div>
          <p><img src="./GoFlexible-img/img_general.jpg" class="middle-column-img-left" width="50"  alt=""/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Aliquam at libero</a>. Suspendisse non risus a diam convallis lobortis. Suspendisse non risus a diam convallis lobortis. Suspendisse non risus a diam convallis lobortis</p>
        </div>        
      </div>
                  
      <!-- Middle column full box -->
      <div class="middle-column-box-white">
        <div class="middle-column-box-title-grey">Grey title</div>
          <p class="subheading">Basic layout</p>
          <p>The basic concept consiss of a three-column layout combined with individual boxes in the middle and right columns. The layout is flexible in two ways. Firstly, the strong menu-capabilities at the top header and left column are comphrehensive and can navigate through a content heavy website. Secondly, by having boxes in the middle and right columns, important topics can be brought to special attention and found more quickly than by going through the menus.</p> 
          <p class="subheading">Middle section</p>
          <p>The text boxes in the middle column consist of two types. Firstly, boxes covering the full width, and secondly boxes covering the half width. The number or sequence of full- or half-width boxes can be chosen freely.</p>
          <p class="subheading">Color scheme and graphics</p>
          <p>The color scheme for the middle and right columns have an independent control of the box titles and the box backgrounds. The layout also provides the possibility of inserting or removing graphics in the middle column.</p>
          <p class="subheading">Text paragraphs</p>
          <p>Three types of text paragraphs are offered, namely "heading", "subheading" and normal text.</p>
      </div>
    </div>

    <!-- FOOTER -->
    <div id="footer">
       Copyright &copy; 2006 Your Company Name | All Rights Reserved<br />Design by <a href="mailto:gw@actamail.com">Gerhard Erbes</a> | <a href="http://validator.w3.org/check?uri=referer" title="Validate code as W3C XHTML 1.1 Strict Compliant">W3C XHTML 1.1</a> | <a href="http://jigsaw.w3.org/css-validator/" title="Validate Style Sheet as W3C CSS 2.0 Compliant">W3C CSS 2.0</a>
    </div>
  </div>
</body>
</html>








Related examples in the same category

1.d-tv
2.dogstemplate
3.domesticated
4.dottis
5.duet-plasma
6.dusky
7.dusplic
8.dynamic
9.dzine
10.eastern-tales
11.easybreeze
12.easymoto
13.eatlon
14.ebullient
15.echo
16.ecolution-warrior
17.ecom-1
18.edgy
19.edy-builders
20.efflorescence
21.elements
22.elitecircle1-0
23.emblazoned
24.embouteillage
25.emerald
26.emergence
27.emperor
28.empireserver
29.emporium
30.enclosed
31.endless
32.energybox
33.enlight
34.enlighten1-0
35.enormous
36.enter
37.enthusiastica
38.entomology
39.envision1-0
40.epod
41.equivalency
42.ergophobia
43.established
44.etags
45.euphonics
46.europe
47.everydayseries
48.evolution
49.exalted
50.excess
51.excursus
52.Executive Template
53.executive
54.Exotic_Blue
55.Exotic_Red
56.fotografix
57.fotolandia
58.foundation
59.foxy
60.fractalbroccoli
61.fragrance
62.frankincense
63.freches-fruechtchen
64.free-css-lunch
65.freecsstemplate 55
66.freecsstemplateno57
67.freecsswebsitetemplate39
68.freecss_greentextile
69.freecss_modern
70.freecss_monolit
71.freecss_redleaves
72.freecss_set
73.freeport
74.freeradicals
75.freestyle
76.frozenage
77.ftd-redblack
78.ftdbusiness
79.ftdcinema
80.ftddrops
81.ftdExplosionBlue
82.ftditight
83.ftdkiwi
84.ftdlagoon
85.ftdLight
86.ftdLightBlue
87.ftdluminescent
88.ftdMoonLight
89.ftdprime
90.ftdspace
91.ftdvivid
92.ftdworld
93.funkytimes
94.funride
95.futuremag-aio
96.fword_three
97.galaxy
98.gallerize
99.gamberetto
100.gameportal
101.Ganesh01
102.gastropoda
103.gathering14
104.gazebo
105.gconsultant
106.general
107.genesis
108.genghiskahn
109.genius_web
110.gentle_wiki
111.geoforce
112.gestured
113.gift-gallery
114.giftig-gruen
115.gila
116.glazed
117.godetia
118.godofgates
119.goinggrey
120.gradientis
121.grandenally
122.grandhost
123.GraniteGlass
124.greefies