Free DNS provides easy shared DNS hosting & URL forwarding

Thursday, August 5, 2010

Elegant SEF columns layout

I found this somewhere (I can't remember where). I'm not using it now, but it's good to know.
The CSS is
/* @begin columns/sidebars (fixed L,R; liquid C) */
.columns-both, .columns-left {
  padding-left: 200px; /* LC width */
}
.columns-both, .columns-right {
  padding-right: 150px; /* RC fullwidth + CC padding */
}
.columns-container .column-main, .columns-container .column-left, .columns-container .column-right {
  position: relative;
  float: left;
}
.columns-container .column-main {
  width: 100%;
}
.columns-container .column-left {
  width: 190px;          /* LC width */
  left: -200px;          /* LC fullwidth + CC padding */
  margin-left: -100%;
}
.columns-container .column-right {
  width: 140px;          /* RC width */
  margin-right: -150px;  /* RC fullwidth + CC padding */
}
/*** IE6 Fix ***/
* html .columns-container .column-left {
  left: 150px;           /* RC fullwidth */
}
/* @end columns/sidebars (fixed L,R; liquid C) */
and the HTML (in a Drupal theme) is:


   

     
     

     
     
     
   

   
   
   

     
   

   
   
   
   

     
   

   
 

No comments:

Post a Comment