ID = page

CSS
  position:relative;
  padding-top:275px;
  width:90%;
  min-width:950px;
  margin:0 auto;
  border:4px dashed green
  
ID = content

CSS
  position:relative;
  float:left;
  width:60%
  margin-left:22%;
  margin-bottom:15px;
  z-index:5

IE-6 CSS
  float:none

IE-7 CSS
  None

HTML code

The general form of the HTML for each of the containers is :

<div id="some_container_id">
  <div class="tl">
  <span class="tr"><!-- --></span>
  <span class="ll"><!-- --></span>
  <div class="lr">
    <div class="cntnt">
      [...CONTENT...]
    </div>
  </div>
</div>

CSS Rules

The CSS applied to all containers is :

.tl, .lr, .tr, .ll { 
  background:url([...Background Image...]]) no-repeat 
}
.tl, .lr { 
  position:relative 
}
.tl { 
  margin-right:33px;
  margin-bottom:33px;
  background-position:top left 
}
.lr { 
  top:33px;left:33px;
  background-position:bottom right 
}
.tr, .ll { 
  position:absolute;
  height:33px;
  width:33px 
}
.tr { 
  top:0;
  right:-33px;
  background-position:top right 
}
.ll { 
  bottom:-33px;
  left:0;background-position:bottom left 
}
.cntnt { 
  position:relative;
  top:-16px;
  left:-16px 
}

Internet Explorer 6 CSS

Internet Explorer 6 needs the following extra CSS to function correctly :

.tr, .ll { 
  display:block 
}
.tr { 
  right:0 
}
.ll { 
  bottom:0 
}
.cntnt { 
  padding:1px
}

Internet Explorer 7 CSS

Internet Explorer 7 needs the following extra CSS to function correctly :

.cntnt { 
  padding:1px 
}
.tl { 
  display:inline-block 
}
          
ID = left_ads

CSS
  float:left;
  clear:left;
  margin-top:20px

IE-6 CSS
  None

IE-7 CSS
  None
            
ID = left_side

CSS
  position:absolute;
  z-index:1;
  left:0;
  top:195px;
  border:3px dotted yellow

IE-6 CSS
  None

IE-7 CSS
  None
    
ID = right_nav

CSS
  position:absolute;
  z-index:0;
  top:700px;
  right:20px

IE-6 CSS
  None

IE-7 CSS
  None