CSS multi columns layout - CSS Snipplr Social Repository

Revision: 7361

at September 12, 2008 04:15 by Ashung

Updated Code

/*= MultiColumns Grid Layout (1-12) */
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 { float: left; }

.columns1  .col1 { width: 100%; }
.columns2  .col1, .columns2  .col2 { width: 50%; }
.columns3  .col1, .columns3  .col2, .columns3  .col3 { width: 33.3%; }
.columns4  .col1, .columns4  .col2, .columns4  .col3, .columns4  .col4 { width: 25%; }
.columns5  .col1, .columns5  .col2, .columns5  .col3, .columns5  .col4, .columns5  .col5 { width: 20%; }
.columns6  .col1, .columns6  .col2, .columns6  .col3, .columns6  .col4, .columns6  .col5, .columns6  .col6 { width: 16.6%; }
.columns7  .col1, .columns7  .col2, .columns7  .col3, .columns7  .col4, .columns7  .col5, .columns7  .col6, .columns7  .col7 { width: 14.2%; }
.columns8  .col1, .columns8  .col2, .columns8  .col3, .columns8  .col4, .columns8  .col5, .columns8  .col6, .columns8  .col7, .columns8  .col8 { width: 12.5%; }
.columns9  .col1, .columns9  .col2, .columns9  .col3, .columns9  .col4, .columns9  .col5, .columns9  .col6, .columns9  .col7, .columns9  .col8, .columns9  .col9 { width: 11.1%; }
.columns10 .col1, .columns10 .col2, .columns10 .col3, .columns10 .col4, .columns10 .col5, .columns10 .col6, .columns10 .col7, .columns10 .col8, .columns10 .col9, .columns10 .col10 { width: 10%; }
.columns11 .col1, .columns11 .col2, .columns11 .col3, .columns11 .col4, .columns11 .col5, .columns11 .col6, .columns11 .col7, .columns11 .col8, .columns11 .col9, .columns11 .col10, columns11 .col11 { width: 9.0%; }
.columns12 .col1, .columns12 .col2, .columns12 .col3, .columns12 .col4, .columns12 .col5, .columns12 .col6, .columns12 .col7, .columns12 .col8, .columns12 .col9, .columns12 .col10, columns12 .col11, .columns12 .col12 { width: 8.3%; }

/*= For IE */
.columns2  .col2  { *width: 49.9%; }
.columns4  .col4  { *width: 24.9%; }
.columns5  .col5  { *width: 19.9%; }
.columns8  .col8  { *width: 12.4%; }
.columns10 .col10 { *width:  9.9%; }

/*= Columns span */
.columns1  .span1 { width: 100%; }

.columns2  .span1 { width: 50%; *width: 49.9%; }
.columns2  .span2 { width: 100%;               }

.columns3  .span1 { width: 33.3%; }
.columns3  .span2 { width: 66.6%; }
.columns3  .span3 { width: 100%;  }

.columns4  .span1 { width: 25%; *width: 24.9%; }
.columns4  .span2 { width: 50%; *width: 49.9%; }
.columns4  .span3 { width: 75%; *width: 74.9%; }
.columns4  .span4 { width: 100%;               }

.columns5  .span1 { width: 20%; *width: 19.9%; }
.columns5  .span2 { width: 40%; *width: 39.9%; }
.columns5  .span3 { width: 60%; *width: 59.9%; }
.columns5  .span4 { width: 80%; *width: 79.9%; }
.columns5  .span5 { width: 100%;               }

.columns6  .span1 { width: 16.6%; }
.columns6  .span2 { width: 33.3%; }
.columns6  .span3 { width: 49.9%; }
.columns6  .span4 { width: 66.6%; }
.columns6  .span5 { width: 83.3%; }
.columns6  .span6 { width: 100%;  }

.columns7  .span1 { width: 14.2%; }
.columns7  .span2 { width: 28.5%; }
.columns7  .span3 { width: 42.8%; }
.columns7  .span4 { width: 57.1%; }
.columns7  .span5 { width: 71.4%; }
.columns7  .span6 { width: 85.6%; }
.columns7  .span7 { width: 100%;  }

.columns8  .span1 { width: 12.5%  *width: 12.4%; }
.columns8  .span2 { width: 25%;   *width: 24.9%; }
.columns8  .span3 { width: 37.5%; *width: 37.4%; }
.columns8  .span4 { width: 50%;   *width: 49.9%; }
.columns8  .span5 { width: 62.5%; *width: 62.4%; }
.columns8  .span6 { width: 85%;   *width: 84.9%; }
.columns8  .span7 { width: 97.5%; *width: 97.4%; }
.columns8  .span8 { width: 100%;                 }

.columns9  .span1 { width: 11.1%; }
.columns9  .span2 { width: 22.2%; }
.columns9  .span3 { width: 33.3%; }
.columns9  .span4 { width: 44.4%; }
.columns9  .span5 { width: 55.5%; }
.columns9  .span6 { width: 66.6%; }
.columns9  .span7 { width: 77.7%; }
.columns9  .span8 { width: 88.8%; }
.columns9  .span9 { width: 100%;  }

.columns10 .span1  { width: 10%; *width:  9.9%; }
.columns10 .span2  { width: 20%; *width: 19.9%; }
.columns10 .span3  { width: 30%; *width: 29.9%; }
.columns10 .span4  { width: 40%; *width: 39.9%; }
.columns10 .span5  { width: 50%; *width: 49.9%; }
.columns10 .span6  { width: 60%; *width: 59.9%; }
.columns10 .span7  { width: 70%; *width: 69.9%; }
.columns10 .span8  { width: 80%; *width: 79.9%; }
.columns10 .span9  { width: 90%; *width: 89.9%; }
.columns10 .span10 { width: 100%;               }

.columns11 .span1  { width:  9.0%; }
.columns11 .span2  { width: 18.1%; }
.columns11 .span3  { width: 27.2%; }
.columns11 .span4  { width: 36.3%; }
.columns11 .span5  { width: 45.4%; }
.columns11 .span6  { width: 54.5%; }
.columns11 .span7  { width: 63.6%; }
.columns11 .span8  { width: 73.7%; }
.columns11 .span9  { width: 81.8%; }
.columns11 .span10 { width: 90.9%; }
.columns11 .span11 { width: 100%;  }

.columns12 .span1  { width:  8.3%; }
.columns12 .span2  { width: 16.6%; }
.columns12 .span3  { width: 24.9%; }
.columns12 .span4  { width: 33.3%; }
.columns12 .span5  { width: 41.6%; }
.columns12 .span6  { width: 49.9%; }
.columns12 .span7  { width: 58.3%; }
.columns12 .span8  { width: 66.6%; }
.columns12 .span9  { width: 74.9%; }
.columns12 .span10 { width: 83.3%; }
.columns12 .span11 { width: 91.6%; }
.columns12 .span12 { width: 100%;  }

/*= multi-columns list (2-12) */
ul.columns2  li, ol.columns2  li, dl.columns2  dd {
    float: left;
    width: 50%;
    *width: 49.9%;
}
ul.columns3  li, ol.columns3  li, dl.columns3  dd {
    float: left;
    width: 33.3%;
}
ul.columns4  li, ol.columns4  li, dl.columns4  dd {
    float: left;
    width: 25%;
    *width: 24.9%;
}
ul.columns5  li, ol.columns5  li, dl.columns5  dd {
    float: left;
    width: 20%;
    *width: 19.9%;
}
ul.columns6  li, ol.columns6  li, dl.columns6  dd {
    float: left;
    width: 16.6%;
}
ul.columns7  li, ol.columns7  li, dl.columns7  dd {
    float: left;
    width: 14.2%;
}
ul.columns8  li, ol.columns8  li, dl.columns8  dd {
    float: left;
    width: 12.5%;
    *width: 12.4%;
}
ul.columns9  li, ol.columns9  li, dl.columns9  dd {
    float: left;
    width: 11.1%;
}
ul.columns10 li, ol.columns10 li, dl.columns10 dd {
    float: left;
    width: 10%;
    *width: 9.9%;
}
ul.columns11 li, ol.columns11 li, dl.columns11 dd {
    float: left;
    width: 9.0%;
}
ul.columns12 li, ol.columns12 li, dl.columns12 dd {
    float: left;
    width: 8.3%;
}

/*= Clear float */
.clearfloat {
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
    font: 0/0 sans-serif;
}
.clearfix { zoom: 1; }
.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

EXAMPLE:
<div class="clearfix columns4 yourClassName">
  <div class="cols1 yourClassName1">...</div>
  <div class="cols2 yourClassName2">...</div>
  <div class="cols3 yourClassName3">...</div>
  <div class="cols4 yourClassName4">...</div>
</div>

<div class="columns2 yourClassName">
  <div class="cols1 yourClassName1">...</div>
  <div class="cols2 yourClassName2">...</div>
  <div class="clearfloat"></div>
</div>

<ul class="clearfix columns2">
  <li>...</li><li>...</li><li>...</li><li>...</li><li>...</li><li>...</li>
</ul>

<dl class="clearfix columns3">
  <dt>...</dt>
  <dd>...</dd><dd>...</dd><dd>...</dd><dd>...</dd><dd>...</dd><dd>...</dd>
</dl>

Revision: 7360

at July 22, 2008 00:39 by Ashung

Updated Code

/*= MultiColumns Grid Layout (1-12) */
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 { float: left; }

.columns1  .col1 { width: 100%; }
.columns2  .col1, .columns2  .col2 { width: 50%; }
.columns3  .col1, .columns3  .col2, .columns3  .col3 { width: 33.3%; }
.columns4  .col1, .columns4  .col2, .columns4  .col3, .columns4  .col4 { width: 25%; }
.columns5  .col1, .columns5  .col2, .columns5  .col3, .columns5  .col4, .columns5  .col5 { width: 20%; }
.columns6  .col1, .columns6  .col2, .columns6  .col3, .columns6  .col4, .columns6  .col5, .columns6  .col6 { width: 16.6%; }
.columns7  .col1, .columns7  .col2, .columns7  .col3, .columns7  .col4, .columns7  .col5, .columns7  .col6, .columns7  .col7 { width: 14.2%; }
.columns8  .col1, .columns8  .col2, .columns8  .col3, .columns8  .col4, .columns8  .col5, .columns8  .col6, .columns8  .col7, .columns8  .col8 { width: 12.5%; }
.columns9  .col1, .columns9  .col2, .columns9  .col3, .columns9  .col4, .columns9  .col5, .columns9  .col6, .columns9  .col7, .columns9  .col8, .columns9  .col9 { width: 11.1%; }
.columns10 .col1, .columns10 .col2, .columns10 .col3, .columns10 .col4, .columns10 .col5, .columns10 .col6, .columns10 .col7, .columns10 .col8, .columns10 .col9, .columns10 .col10 { width: 10%; }
.columns11 .col1, .columns11 .col2, .columns11 .col3, .columns11 .col4, .columns11 .col5, .columns11 .col6, .columns11 .col7, .columns11 .col8, .columns11 .col9, .columns11 .col10, columns11 .col11 { width: 9.0%; }
.columns12 .col1, .columns12 .col2, .columns12 .col3, .columns12 .col4, .columns12 .col5, .columns12 .col6, .columns12 .col7, .columns12 .col8, .columns12 .col9, .columns12 .col10, columns12 .col11, .columns12 .col12 { width: 8.3%; }

/*= For IE */
.columns2  .col2  { *width: 49.9%; }
.columns4  .col4  { *width: 24.9%; }
.columns5  .col5  { *width: 19.9%; }
.columns8  .col8  { *width: 12.4%; }
.columns10 .col10 { *width:  9.9%; }

/*= Columns span */
.columns1  .span1 { width: 100%; }

.columns2  .span1 { width: 50%; *width: 49.9%; }
.columns2  .span2 { width: 100%;               }

.columns3  .span1 { width: 33.3%; }
.columns3  .span2 { width: 66.6%; }
.columns3  .span3 { width: 100%;  }

.columns4  .span1 { width: 25%; *width: 24.9%; }
.columns4  .span2 { width: 50%; *width: 49.9%; }
.columns4  .span3 { width: 75%; *width: 74.9%; }
.columns4  .span4 { width: 100%;               }

.columns5  .span1 { width: 20%; *width: 19.9%; }
.columns5  .span2 { width: 40%; *width: 39.9%; }
.columns5  .span3 { width: 60%; *width: 59.9%; }
.columns5  .span4 { width: 80%; *width: 79.9%; }
.columns5  .span5 { width: 100%;               }

.columns6  .span1 { width: 16.6%; }
.columns6  .span2 { width: 33.3%; }
.columns6  .span3 { width: 49.9%; }
.columns6  .span4 { width: 66.6%; }
.columns6  .span5 { width: 83.3%; }
.columns6  .span6 { width: 100%;  }

.columns7  .span1 { width: 14.2%; }
.columns7  .span2 { width: 28.5%; }
.columns7  .span3 { width: 42.8%; }
.columns7  .span4 { width: 57.1%; }
.columns7  .span5 { width: 71.4%; }
.columns7  .span6 { width: 85.6%; }
.columns7  .span7 { width: 100%;  }

.columns8  .span1 { width: 12.5%  *width: 12.4%; }
.columns8  .span2 { width: 25%;   *width: 24.9%; }
.columns8  .span3 { width: 37.5%; *width: 37.4%; }
.columns8  .span4 { width: 50%;   *width: 49.9%; }
.columns8  .span5 { width: 62.5%; *width: 62.4%; }
.columns8  .span6 { width: 85%;   *width: 84.9%; }
.columns8  .span7 { width: 97.5%; *width: 97.4%; }
.columns8  .span8 { width: 100%;                 }

.columns9  .span1 { width: 11.1%; }
.columns9  .span2 { width: 22.2%; }
.columns9  .span3 { width: 33.3%; }
.columns9  .span4 { width: 44.4%; }
.columns9  .span5 { width: 55.5%; }
.columns9  .span6 { width: 66.6%; }
.columns9  .span7 { width: 77.7%; }
.columns9  .span8 { width: 88.8%; }
.columns9  .span9 { width: 100%;  }

.columns10 .span1  { width: 10%; *width:  9.9%; }
.columns10 .span2  { width: 20%; *width: 19.9%; }
.columns10 .span3  { width: 30%; *width: 29.9%; }
.columns10 .span4  { width: 40%; *width: 39.9%; }
.columns10 .span5  { width: 50%; *width: 49.9%; }
.columns10 .span6  { width: 60%; *width: 59.9%; }
.columns10 .span7  { width: 70%; *width: 69.9%; }
.columns10 .span8  { width: 80%; *width: 79.9%; }
.columns10 .span9  { width: 90%; *width: 89.9%; }
.columns10 .span10 { width: 100%;               }

.columns11 .span1  { width:  9.0%; }
.columns11 .span2  { width: 18.1%; }
.columns11 .span3  { width: 27.2%; }
.columns11 .span4  { width: 36.3%; }
.columns11 .span5  { width: 45.4%; }
.columns11 .span6  { width: 54.5%; }
.columns11 .span7  { width: 63.6%; }
.columns11 .span8  { width: 73.7%; }
.columns11 .span9  { width: 81.8%; }
.columns11 .span10 { width: 90.9%; }
.columns11 .span11 { width: 100%;  }

.columns12 .span1  { width:  8.3%; }
.columns12 .span2  { width: 16.6%; }
.columns12 .span3  { width: 24.9%; }
.columns12 .span4  { width: 33.3%; }
.columns12 .span5  { width: 41.6%; }
.columns12 .span6  { width: 49.9%; }
.columns12 .span7  { width: 58.3%; }
.columns12 .span8  { width: 66.6%; }
.columns12 .span9  { width: 74.9%; }
.columns12 .span10 { width: 83.3%; }
.columns12 .span11 { width: 91.6%; }
.columns12 .span12 { width: 100%;  }

/*= multi-columns list (2-12) */
ul.columns2  li, ol.columns2  li, dl.columns2  dd {
    float: left;
    width: 50%;
    *width: 49.9%;
}
ul.columns3  li, ol.columns3  li, dl.columns3  dd {
    float: left;
    width: 33.3%;
}
ul.columns4  li, ol.columns4  li, dl.columns4  dd {
    float: left;
    width: 25%;
    *width: 24.9%;
}
ul.columns5  li, ol.columns5  li, dl.columns5  dd {
    float: left;
    width: 20%;
    *width: 19.9%;
}
ul.columns6  li, ol.columns6  li, dl.columns6  dd {
    float: left;
    width: 16.6%;
}
ul.columns7  li, ol.columns7  li, dl.columns7  dd {
    float: left;
    width: 14.2%;
}
ul.columns8  li, ol.columns8  li, dl.columns8  dd {
    float: left;
    width: 12.5%;
    *width: 12.4%;
}
ul.columns9  li, ol.columns9  li, dl.columns9  dd {
    float: left;
    width: 11.1%;
}
ul.columns10 li, ol.columns10 li, dl.columns10 dd {
    float: left;
    width: 10%;
    *width: 9.9%;
}
ul.columns11 li, ol.columns11 li, dl.columns11 dd {
    float: left;
    width: 9.0%;
}
ul.columns12 li, ol.columns12 li, dl.columns12 dd {
    float: left;
    width: 8.3%;
}

/*= Clear float */
.clearfloat   { display: block;
                clear: both;
                height: 0;
                overflow: hidden;
                font: 0/0 sans-serif;
              }

.clearfix        { display: inline-block; }
/* Hides from IE5 mac \*/
* html .clearfix { height: 1%;            }
.clearfix        { display: block;        }
/* End hide from IE5 mac */
.clearfix        { content: ".";
                   clear: both;
                   display: block;
                   height: 0;
                   visibility: hidden;
                 }

EXAMPLE:
<div class="clearfix columns4 yourClassName">
  <div class="cols1 yourClassName1">...</div>
  <div class="cols2 yourClassName2">...</div>
  <div class="cols3 yourClassName3">...</div>
  <div class="cols4 yourClassName4">...</div>
</div>

<div class="columns2 yourClassName">
  <div class="cols1 yourClassName1">...</div>
  <div class="cols2 yourClassName2">...</div>
  <div class="clearfloat"></div>
</div>

<ul class="clearfix columns2">
  <li>...</li><li>...</li><li>...</li><li>...</li><li>...</li><li>...</li>
</ul>

<dl class="clearfix columns3">
  <dt>...</dt>
  <dd>...</dd><dd>...</dd><dd>...</dd><dd>...</dd><dd>...</dd><dd>...</dd>
</dl>

Revision: 7359

at July 22, 2008 00:37 by Ashung

Updated Code

/*= MultiColumns Grid Layout (1-12) */
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 { float: left; }

.columns1  .col1 { width: 100%; }
.columns2  .col1, .columns2  .col2 { width: 50%; }
.columns3  .col1, .columns3  .col2, .columns3  .col3 { width: 33.3%; }
.columns4  .col1, .columns4  .col2, .columns4  .col3, .columns4  .col4 { width: 25%; }
.columns5  .col1, .columns5  .col2, .columns5  .col3, .columns5  .col4, .columns5  .col5 { width: 20%; }
.columns6  .col1, .columns6  .col2, .columns6  .col3, .columns6  .col4, .columns6  .col5, .columns6  .col6 { width: 16.6%; }
.columns7  .col1, .columns7  .col2, .columns7  .col3, .columns7  .col4, .columns7  .col5, .columns7  .col6, .columns7  .col7 { width: 14.2%; }
.columns8  .col1, .columns8  .col2, .columns8  .col3, .columns8  .col4, .columns8  .col5, .columns8  .col6, .columns8  .col7, .columns8  .col8 { width: 12.5%; }
.columns9  .col1, .columns9  .col2, .columns9  .col3, .columns9  .col4, .columns9  .col5, .columns9  .col6, .columns9  .col7, .columns9  .col8, .columns9  .col9 { width: 11.1%; }
.columns10 .col1, .columns10 .col2, .columns10 .col3, .columns10 .col4, .columns10 .col5, .columns10 .col6, .columns10 .col7, .columns10 .col8, .columns10 .col9, .columns10 .col10 { width: 10%; }
.columns11 .col1, .columns11 .col2, .columns11 .col3, .columns11 .col4, .columns11 .col5, .columns11 .col6, .columns11 .col7, .columns11 .col8, .columns11 .col9, .columns11 .col10, columns11 .col11 { width: 9.0%; }
.columns12 .col1, .columns12 .col2, .columns12 .col3, .columns12 .col4, .columns12 .col5, .columns12 .col6, .columns12 .col7, .columns12 .col8, .columns12 .col9, .columns12 .col10, columns12 .col11, .columns12 .col12 { width: 8.3%; }

/*= For IE */
.columns2  .col2  { *width: 49.9%; }
.columns4  .col4  { *width: 24.9%; }
.columns5  .col5  { *width: 19.9%; }
.columns8  .col8  { *width: 12.4%; }
.columns10 .col10 { *width:  9.9%; }

/*= Columns span */
.columns1  .span1 { width: 100%; }

.columns2  .span1 { width: 50%; *width: 49.9%; }
.columns2  .span2 { width: 100%;               }

.columns3  .span1 { width: 33.3%; }
.columns3  .span2 { width: 66.6%; }
.columns3  .span3 { width: 100%;  }

.columns4  .span1 { width: 25%; *width: 24.9%; }
.columns4  .span2 { width: 50%; *width: 49.9%; }
.columns4  .span3 { width: 75%; *width: 74.9%; }
.columns4  .span4 { width: 100%;               }

.columns5  .span1 { width: 20%; *width: 19.9%; }
.columns5  .span2 { width: 40%; *width: 39.9%; }
.columns5  .span3 { width: 60%; *width: 59.9%; }
.columns5  .span4 { width: 80%; *width: 79.9%; }
.columns5  .span5 { width: 100%;               }

.columns6  .span1 { width: 16.6%; }
.columns6  .span2 { width: 33.3%; }
.columns6  .span3 { width: 49.9%; }
.columns6  .span4 { width: 66.6%; }
.columns6  .span5 { width: 83.3%; }
.columns6  .span6 { width: 100%;  }

.columns7  .span1 { width: 14.2%; }
.columns7  .span2 { width: 28.5%; }
.columns7  .span3 { width: 42.8%; }
.columns7  .span4 { width: 57.1%; }
.columns7  .span5 { width: 71.4%; }
.columns7  .span6 { width: 85.6%; }
.columns7  .span7 { width: 100%;  }

.columns8  .span1 { width: 12.5%  *width: 12.4%; }
.columns8  .span2 { width: 25%;   *width: 24.9%; }
.columns8  .span3 { width: 37.5%; *width: 37.4%; }
.columns8  .span4 { width: 50%;   *width: 49.9%; }
.columns8  .span5 { width: 62.5%; *width: 62.4%; }
.columns8  .span6 { width: 85%;   *width: 84.9%; }
.columns8  .span7 { width: 97.5%; *width: 97.4%; }
.columns8  .span8 { width: 100%;                 }

.columns9  .span1 { width: 11.1%; }
.columns9  .span2 { width: 22.2%; }
.columns9  .span3 { width: 33.3%; }
.columns9  .span4 { width: 44.4%; }
.columns9  .span5 { width: 55.5%; }
.columns9  .span6 { width: 66.6%; }
.columns9  .span7 { width: 77.7%; }
.columns9  .span8 { width: 88.8%; }
.columns9  .span9 { width: 100%;  }

.columns10 .span1  { width: 10%; *width:  9.9%; }
.columns10 .span2  { width: 20%; *width: 19.9%; }
.columns10 .span3  { width: 30%; *width: 29.9%; }
.columns10 .span4  { width: 40%; *width: 39.9%; }
.columns10 .span5  { width: 50%; *width: 49.9%; }
.columns10 .span6  { width: 60%; *width: 59.9%; }
.columns10 .span7  { width: 70%; *width: 69.9%; }
.columns10 .span8  { width: 80%; *width: 79.9%; }
.columns10 .span9  { width: 90%; *width: 89.9%; }
.columns10 .span10 { width: 100%;               }

.columns11 .span1  { width:  9.0%; }
.columns11 .span2  { width: 18.1%; }
.columns11 .span3  { width: 27.2%; }
.columns11 .span4  { width: 36.3%; }
.columns11 .span5  { width: 45.4%; }
.columns11 .span6  { width: 54.5%; }
.columns11 .span7  { width: 63.6%; }
.columns11 .span8  { width: 73.7%; }
.columns11 .span9  { width: 81.8%; }
.columns11 .span10 { width: 90.9%; }
.columns11 .span11 { width: 100%;  }

.columns12 .span1  { width:  8.3%; }
.columns12 .span2  { width: 16.6%; }
.columns12 .span3  { width: 24.9%; }
.columns12 .span4  { width: 33.3%; }
.columns12 .span5  { width: 41.6%; }
.columns12 .span6  { width: 49.9%; }
.columns12 .span7  { width: 58.3%; }
.columns12 .span8  { width: 66.6%; }
.columns12 .span9  { width: 74.9%; }
.columns12 .span10 { width: 83.3%; }
.columns12 .span11 { width: 91.6%; }
.columns12 .span12 { width: 100%;  }

/*= multi-columns list (2-12) */
ul.columns2  li, ol.columns2  li, dl.columns2  dd {
    float: left;
    width: 50%;
    *width: 49.9%;
}
ul.columns3  li, ol.columns3  li, dl.columns3  dd {
    float: left;
    width: 33.3%;
}
ul.columns4  li, ol.columns4  li, dl.columns4  dd {
    float: left;
    width: 25%;
    *width: 24.9%;
}
ul.columns5  li, ol.columns5  li, dl.columns5  dd {
    float: left;
    width: 20%;
    *width: 19.9%;
}
ul.columns6  li, ol.columns6  li, dl.columns6  dd {
    float: left;
    width: 16.6%;
}
ul.columns7  li, ol.columns7  li, dl.columns7  dd {
    float: left;
    width: 14.2%;
}
ul.columns8  li, ol.columns8  li, dl.columns8  dd {
    float: left;
    width: 12.5%;
    *width: 12.4%;
}
ul.columns9  li, ol.columns9  li, dl.columns9  dd {
    float: left;
    width: 11.1%;
}
ul.columns10 li, ol.columns10 li, dl.columns10 dd {
    float: left;
    width: 10%;
    *width: 9.9%;
}
ul.columns11 li, ol.columns11 li, dl.columns11 dd {
    float: left;
    width: 9.0%;
}
ul.columns12 li, ol.columns12 li, dl.columns12 dd {
    float: left;
    width: 8.3%;
}

/*= Clear float */
.clearfloat   { display: block;
                clear: both;
                height: 0;
                overflow: hidden;
                font: 0/0 sans-serif;
              }

.clearfix        { display: inline-block; }
/* Hides from IE5 mac \*/
* html .clearfix { height: 1%;            }
.clearfix        { display: block;        }
/* End hide from IE5 mac */
.clearfix        { content: ".";
                   clear: both;
                   display: block;
                   height: 0;
                   visibility: hidden;
                 }

EXAMPLE:
<div class="clearfix columns4 yourClassName">
  <div class="cols1 yourClassName1">...</div>
  <div class="cols2 yourClassName2">...</div>
  <div class="cols3 yourClassName3">...</div>
  <div class="cols4 yourClassName4">...</div>
</div>

<div class="clearfix columns2 yourClassName">
  <div class="cols1 yourClassName1">...</div>
  <div class="cols2 yourClassName2">...</div>
  <div class="clearfloat"></div>
</div>

<ul class="clearfix columns2">
  <li>...</li><li>...</li><li>...</li><li>...</li><li>...</li><li>...</li>
</ul>

<dl class="clearfix columns3">
  <dt>...</dt>
  <dd>...</dd><dd>...</dd><dd>...</dd><dd>...</dd><dd>...</dd><dd>...</dd>
</dl>

Revision: 7358

at July 22, 2008 00:23 by Ashung

Updated Code

/*= MultiColumns Grid Layout (1-12) */
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 { float: left; }

.columns1  .col1 { width: 100%; }
.columns2  .col1, .columns2  .col2 { width: 50%; }
.columns3  .col1, .columns3  .col2, .columns3  .col3 { width: 33.3%; }
.columns4  .col1, .columns4  .col2, .columns4  .col3, .columns4  .col4 { width: 25%; }
.columns5  .col1, .columns5  .col2, .columns5  .col3, .columns5  .col4, .columns5  .col5 { width: 20%; }
.columns6  .col1, .columns6  .col2, .columns6  .col3, .columns6  .col4, .columns6  .col5, .columns6  .col6 { width: 16.6%; }
.columns7  .col1, .columns7  .col2, .columns7  .col3, .columns7  .col4, .columns7  .col5, .columns7  .col6, .columns7  .col7 { width: 14.2%; }
.columns8  .col1, .columns8  .col2, .columns8  .col3, .columns8  .col4, .columns8  .col5, .columns8  .col6, .columns8  .col7, .columns8  .col8 { width: 12.5%; }
.columns9  .col1, .columns9  .col2, .columns9  .col3, .columns9  .col4, .columns9  .col5, .columns9  .col6, .columns9  .col7, .columns9  .col8, .columns9  .col9 { width: 11.1%; }
.columns10 .col1, .columns10 .col2, .columns10 .col3, .columns10 .col4, .columns10 .col5, .columns10 .col6, .columns10 .col7, .columns10 .col8, .columns10 .col9, .columns10 .col10 { width: 10%; }
.columns11 .col1, .columns11 .col2, .columns11 .col3, .columns11 .col4, .columns11 .col5, .columns11 .col6, .columns11 .col7, .columns11 .col8, .columns11 .col9, .columns11 .col10, columns11 .col11 { width: 9.0%; }
.columns12 .col1, .columns12 .col2, .columns12 .col3, .columns12 .col4, .columns12 .col5, .columns12 .col6, .columns12 .col7, .columns12 .col8, .columns12 .col9, .columns12 .col10, columns12 .col11, .columns12 .col12 { width: 8.3%; }

/*= For IE */
.columns2  .col2  { *width: 49.9%; }
.columns4  .col4  { *width: 24.9%; }
.columns5  .col5  { *width: 19.9%; }
.columns8  .col8  { *width: 12.4%; }
.columns10 .col10 { *width:  9.9%; }

/*= Columns span */
.columns1  .span1 { width: 100%; }

.columns2  .span1 { width: 50%; *width: 49.9%; }
.columns2  .span2 { width: 100%;               }

.columns3  .span1 { width: 33.3%; }
.columns3  .span2 { width: 66.6%; }
.columns3  .span3 { width: 100%;  }

.columns4  .span1 { width: 25%; *width: 24.9%; }
.columns4  .span2 { width: 50%; *width: 49.9%; }
.columns4  .span3 { width: 75%; *width: 74.9%; }
.columns4  .span4 { width: 100%;               }

.columns5  .span1 { width: 20%; *width: 19.9%; }
.columns5  .span2 { width: 40%; *width: 39.9%; }
.columns5  .span3 { width: 60%; *width: 59.9%; }
.columns5  .span4 { width: 80%; *width: 79.9%; }
.columns5  .span5 { width: 100%;               }

.columns6  .span1 { width: 16.6%; }
.columns6  .span2 { width: 33.3%; }
.columns6  .span3 { width: 49.9%; }
.columns6  .span4 { width: 66.6%; }
.columns6  .span5 { width: 83.3%; }
.columns6  .span6 { width: 100%;  }

.columns7  .span1 { width: 14.2%; }
.columns7  .span2 { width: 28.5%; }
.columns7  .span3 { width: 42.8%; }
.columns7  .span4 { width: 57.1%; }
.columns7  .span5 { width: 71.4%; }
.columns7  .span6 { width: 85.6%; }
.columns7  .span7 { width: 100%;  }

.columns8  .span1 { width: 12.5%  *width: 12.4%; }
.columns8  .span2 { width: 25%;   *width: 24.9%; }
.columns8  .span3 { width: 37.5%; *width: 37.4%; }
.columns8  .span4 { width: 50%;   *width: 49.9%; }
.columns8  .span5 { width: 62.5%; *width: 62.4%; }
.columns8  .span6 { width: 85%;   *width: 84.9%; }
.columns8  .span7 { width: 97.5%; *width: 97.4%; }
.columns8  .span8 { width: 100%;                 }

.columns9  .span1 { width: 11.1%; }
.columns9  .span2 { width: 22.2%; }
.columns9  .span3 { width: 33.3%; }
.columns9  .span4 { width: 44.4%; }
.columns9  .span5 { width: 55.5%; }
.columns9  .span6 { width: 66.6%; }
.columns9  .span7 { width: 77.7%; }
.columns9  .span8 { width: 88.8%; }
.columns9  .span9 { width: 100%;  }

.columns10 .span1  { width: 10%; *width:  9.9%; }
.columns10 .span2  { width: 20%; *width: 19.9%; }
.columns10 .span3  { width: 30%; *width: 29.9%; }
.columns10 .span4  { width: 40%; *width: 39.9%; }
.columns10 .span5  { width: 50%; *width: 49.9%; }
.columns10 .span6  { width: 60%; *width: 59.9%; }
.columns10 .span7  { width: 70%; *width: 69.9%; }
.columns10 .span8  { width: 80%; *width: 79.9%; }
.columns10 .span9  { width: 90%; *width: 89.9%; }
.columns10 .span10 { width: 100%;               }

.columns11 .span1  { width:  9.0%; }
.columns11 .span2  { width: 18.1%; }
.columns11 .span3  { width: 27.2%; }
.columns11 .span4  { width: 36.3%; }
.columns11 .span5  { width: 45.4%; }
.columns11 .span6  { width: 54.5%; }
.columns11 .span7  { width: 63.6%; }
.columns11 .span8  { width: 73.7%; }
.columns11 .span9  { width: 81.8%; }
.columns11 .span10 { width: 90.9%; }
.columns11 .span11 { width: 100%;  }

.columns12 .span1  { width:  8.3%; }
.columns12 .span2  { width: 16.6%; }
.columns12 .span3  { width: 24.9%; }
.columns12 .span4  { width: 33.3%; }
.columns12 .span5  { width: 41.6%; }
.columns12 .span6  { width: 49.9%; }
.columns12 .span7  { width: 58.3%; }
.columns12 .span8  { width: 66.6%; }
.columns12 .span9  { width: 74.9%; }
.columns12 .span10 { width: 83.3%; }
.columns12 .span11 { width: 91.6%; }
.columns12 .span12 { width: 100%;  }

/*= multi-columns list (2-12) */
ul.columns2  li, ol.columns2  li, dl.columns2  dd {
    float: left;
    width: 50%;
    *width: 49.9%;
}
ul.columns3  li, ol.columns3  li, dl.columns3  dd {
    float: left;
    width: 33.3%;
}
ul.columns4  li, ol.columns4  li, dl.columns4  dd {
    float: left;
    width: 25%;
    *width: 24.9%;
}
ul.columns5  li, ol.columns5  li, dl.columns5  dd {
    float: left;
    width: 20%;
    *width: 19.9%;
}
ul.columns6  li, ol.columns6  li, dl.columns6  dd {
    float: left;
    width: 16.6%;
}
ul.columns7  li, ol.columns7  li, dl.columns7  dd {
    float: left;
    width: 14.2%;
}
ul.columns8  li, ol.columns8  li, dl.columns8  dd {
    float: left;
    width: 12.5%;
    *width: 12.4%;
}
ul.columns9  li, ol.columns9  li, dl.columns9  dd {
    float: left;
    width: 11.1%;
}
ul.columns10 li, ol.columns10 li, dl.columns10 dd {
    float: left;
    width: 10%;
    *width: 9.9%;
}
ul.columns11 li, ol.columns11 li, dl.columns11 dd {
    float: left;
    width: 9.0%;
}
ul.columns12 li, ol.columns12 li, dl.columns12 dd {
    float: left;
    width: 8.3%;
}

EXAMPLE:
<div class="columns4 yourClassName">
  <div class="cols1 yourClassName1"></div>
  <div class="cols2 yourClassName2"></div>
  <div class="cols3 yourClassName3"></div>
  <div class="cols4 yourClassName4"></div>
</div>

<ul class="columns2">
  <li>...</li><li>...</li><li>...</li><li>...</li><li>...</li><li>...</li>
</ul>

Revision: 7357

at July 21, 2008 22:10 by Ashung

Updated Code

/*= MultiColumns Grid Layout (1-12) */
.columns1  .col1 { width: 100%; }
.columns2  .col1, .columns2  .col2 { width: 50%; }
.columns3  .col1, .columns3  .col2, .columns3  .col3 { width: 33.3%; }
.columns4  .col1, .columns4  .col2, .columns4  .col3, .columns4  .col4 { width: 25%; }
.columns5  .col1, .columns5  .col2, .columns5  .col3, .columns5  .col4, .columns5  .col5 { width: 20%; }
.columns6  .col1, .columns6  .col2, .columns6  .col3, .columns6  .col4, .columns6  .col5, .columns6  .col6 { width: 16.6%; }
.columns7  .col1, .columns7  .col2, .columns7  .col3, .columns7  .col4, .columns7  .col5, .columns7  .col6, .columns7  .col7 { width: 14.2%; }
.columns8  .col1, .columns8  .col2, .columns8  .col3, .columns8  .col4, .columns8  .col5, .columns8  .col6, .columns8  .col7, .columns8  .col8 { width: 12.5%; }
.columns9  .col1, .columns9  .col2, .columns9  .col3, .columns9  .col4, .columns9  .col5, .columns9  .col6, .columns9  .col7, .columns9  .col8, .columns9  .col9 { width: 11.1%; }
.columns10 .col1, .columns10 .col2, .columns10 .col3, .columns10 .col4, .columns10 .col5, .columns10 .col6, .columns10 .col7, .columns10 .col8, .columns10 .col9, .columns10 .col10 { width: 10%; }
.columns11 .col1, .columns11 .col2, .columns11 .col3, .columns11 .col4, .columns11 .col5, .columns11 .col6, .columns11 .col7, .columns11 .col8, .columns11 .col9, .columns11 .col10, columns11 .col11 { width: 9.0%; }
.columns12 .col1, .columns12 .col2, .columns12 .col3, .columns12 .col4, .columns12 .col5, .columns12 .col6, .columns12 .col7, .columns12 .col8, .columns12 .col9, .columns12 .col10, columns12 .col11, .columns12 .col12 { width: 8.3%; }

/*= For IE */
.columns2  .col2  { *width: 49.9%; }
.columns4  .col4  { *width: 24.9%; }
.columns5  .col5  { *width: 19.9%; }
.columns8  .col8  { *width: 12.4%; }
.columns10 .col10 { *width:  9.9%; }

/*= Columns span */
.columns1  .span1 { width: 100%; }

.columns2  .span1 { width: 50%; *width: 49.9%; }
.columns2  .span2 { width: 100%;               }

.columns3  .span1 { width: 33.3%; }
.columns3  .span2 { width: 66.6%; }
.columns3  .span3 { width: 100%;  }

.columns4  .span1 { width: 25%; *width: 24.9%; }
.columns4  .span2 { width: 50%; *width: 49.9%; }
.columns4  .span3 { width: 75%; *width: 74.9%; }
.columns4  .span4 { width: 100%;               }

.columns5  .span1 { width: 20%; *width: 19.9%; }
.columns5  .span2 { width: 40%; *width: 39.9%; }
.columns5  .span3 { width: 60%; *width: 59.9%; }
.columns5  .span4 { width: 80%; *width: 79.9%; }
.columns5  .span5 { width: 100%;               }

.columns6  .span1 { width: 16.6%; }
.columns6  .span2 { width: 33.3%; }
.columns6  .span3 { width: 49.9%; }
.columns6  .span4 { width: 66.6%; }
.columns6  .span5 { width: 83.3%; }
.columns6  .span6 { width: 100%;  }

.columns7  .span1 { width: 14.2%; }
.columns7  .span2 { width: 28.5%; }
.columns7  .span3 { width: 42.8%; }
.columns7  .span4 { width: 57.1%; }
.columns7  .span5 { width: 71.4%; }
.columns7  .span6 { width: 85.6%; }
.columns7  .span7 { width: 100%;  }

.columns8  .span1 { width: 12.5%  *width: 12.4%; }
.columns8  .span2 { width: 25%;   *width: 24.9%; }
.columns8  .span3 { width: 37.5%; *width: 37.4%; }
.columns8  .span4 { width: 50%;   *width: 49.9%; }
.columns8  .span5 { width: 62.5%; *width: 62.4%; }
.columns8  .span6 { width: 85%;   *width: 84.9%; }
.columns8  .span7 { width: 97.5%; *width: 97.4%; }
.columns8  .span8 { width: 100%;                 }

.columns9  .span1 { width: 11.1%; }
.columns9  .span2 { width: 22.2%; }
.columns9  .span3 { width: 33.3%; }
.columns9  .span4 { width: 44.4%; }
.columns9  .span5 { width: 55.5%; }
.columns9  .span6 { width: 66.6%; }
.columns9  .span7 { width: 77.7%; }
.columns9  .span8 { width: 88.8%; }
.columns9  .span9 { width: 100%;  }

.columns10 .span1  { width: 10%; *width:  9.9%; }
.columns10 .span2  { width: 20%; *width: 19.9%; }
.columns10 .span3  { width: 30%; *width: 29.9%; }
.columns10 .span4  { width: 40%; *width: 39.9%; }
.columns10 .span5  { width: 50%; *width: 49.9%; }
.columns10 .span6  { width: 60%; *width: 59.9%; }
.columns10 .span7  { width: 70%; *width: 69.9%; }
.columns10 .span8  { width: 80%; *width: 79.9%; }
.columns10 .span9  { width: 90%; *width: 89.9%; }
.columns10 .span10 { width: 100%;               }

.columns11 .span1  { width:  9.0%; }
.columns11 .span2  { width: 18.1%; }
.columns11 .span3  { width: 27.2%; }
.columns11 .span4  { width: 36.3%; }
.columns11 .span5  { width: 45.4%; }
.columns11 .span6  { width: 54.5%; }
.columns11 .span7  { width: 63.6%; }
.columns11 .span8  { width: 73.7%; }
.columns11 .span9  { width: 81.8%; }
.columns11 .span10 { width: 90.9%; }
.columns11 .span11 { width: 100%;  }

.columns12 .span1  { width:  8.3%; }
.columns12 .span2  { width: 16.6%; }
.columns12 .span3  { width: 24.9%; }
.columns12 .span4  { width: 33.3%; }
.columns12 .span5  { width: 41.6%; }
.columns12 .span6  { width: 49.9%; }
.columns12 .span7  { width: 58.3%; }
.columns12 .span8  { width: 66.6%; }
.columns12 .span9  { width: 74.9%; }
.columns12 .span10 { width: 83.3%; }
.columns12 .span11 { width: 91.6%; }
.columns12 .span12 { width: 100%;  }

/*= multi-columns list (2-12) */
ul.columns2  li, ol.columns2  li, dl.columns2  dd {
    float: left;
    width: 50%;
    *width: 49.9%;
}
ul.columns3  li, ol.columns3  li, dl.columns3  dd {
    float: left;
    width: 33.3%;
}
ul.columns4  li, ol.columns4  li, dl.columns4  dd {
    float: left;
    width: 25%;
    *width: 24.9%;
}
ul.columns5  li, ol.columns5  li, dl.columns5  dd {
    float: left;
    width: 20%;
    *width: 19.9%;
}
ul.columns6  li, ol.columns6  li, dl.columns6  dd {
    float: left;
    width: 16.6%;
}
ul.columns7  li, ol.columns7  li, dl.columns7  dd {
    float: left;
    width: 14.2%;
}
ul.columns8  li, ol.columns8  li, dl.columns8  dd {
    float: left;
    width: 12.5%;
    *width: 12.4%;
}
ul.columns9  li, ol.columns9  li, dl.columns9  dd {
    float: left;
    width: 11.1%;
}
ul.columns10 li, ol.columns10 li, dl.columns10 dd {
    float: left;
    width: 10%;
    *width: 9.9%;
}
ul.columns11 li, ol.columns11 li, dl.columns11 dd {
    float: left;
    width: 9.0%;
}
ul.columns12 li, ol.columns12 li, dl.columns12 dd {
    float: left;
    width: 8.3%;
}

Revision: 7356

at July 19, 2008 01:42 by Ashung

Initial Code

/*= multicols layout (2-6) */
.multicols2 .col1, .multicols2 .col2,
ul.multicols2 li, ol.multicols2 li, dl.multicols2 dd {
    float: left;
    width: 50%;
    *width: 49.9%;
}
.multicols3 .col1, .multicols3 .col2, .multicols3 .col3,
ul.multicols3 li, ol.multicols3 li, dl.multicols3 dd {
    float: left;
    width: 33.3%;
}
.multicols4 .col1, .multicols4 .col2, .multicols4 .col3, .multicols4 .col4,
ul.multicols4 li, ol.multicols4 li, dl.multicols4 dd {
    float: left;
    width: 25%;
    *width: 24.9%;
}
.multicols5 .col1, .multicols5 .col2, .multicols5 .col3, .multicols5 .col4, .multicols5 .col5,
ul.multicols5 li, ol.multicols5 li, dl.multicols5 dd {
    float: left;
    width: 20%;
    *width: 99.9%;
}
.multicols6 .col1, .multicols6 .col2, .multicols6 .col3, .multicols6 .col4, .multicols6 .col5, .multicols6 .col6,
ul.multicols5 li, ol.multicols5 li, dl.multicols5 dd{
    float: left;
    width: 16.6%;
}

Initial URL

Initial Description

CSS multi columns layout

Initial Title

CSS multi columns layout

Initial Tags

css, layout

Initial Language

CSS

Choose a language for easy browsing: