Advanced Search

CSS multi columns layout

/ Published in: CSS
Save to your folder(s)
CSS multi columns layout

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*= MultiColumns Grid Layout (1-12) */
  2. .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 { float: left; }
  3.  
  4. .columns1  .col1 { width: 100%; }
  5. .columns2  .col1, .columns2  .col2 { width: 50%; }
  6. .columns3  .col1, .columns3  .col2, .columns3  .col3 { width: 33.3%; }
  7. .columns4  .col1, .columns4  .col2, .columns4  .col3, .columns4  .col4 { width: 25%; }
  8. .columns5  .col1, .columns5  .col2, .columns5  .col3, .columns5  .col4, .columns5  .col5 { width: 20%; }
  9. .columns6  .col1, .columns6  .col2, .columns6  .col3, .columns6  .col4, .columns6  .col5, .columns6  .col6 { width: 16.6%; }
  10. .columns7  .col1, .columns7  .col2, .columns7  .col3, .columns7  .col4, .columns7  .col5, .columns7  .col6, .columns7  .col7 { width: 14.2%; }
  11. .columns8  .col1, .columns8  .col2, .columns8  .col3, .columns8  .col4, .columns8  .col5, .columns8  .col6, .columns8  .col7, .columns8  .col8 { width: 12.5%; }
  12. .columns9  .col1, .columns9  .col2, .columns9  .col3, .columns9  .col4, .columns9  .col5, .columns9  .col6, .columns9  .col7, .columns9  .col8, .columns9  .col9 { width: 11.1%; }
  13. .columns10 .col1, .columns10 .col2, .columns10 .col3, .columns10 .col4, .columns10 .col5, .columns10 .col6, .columns10 .col7, .columns10 .col8, .columns10 .col9, .columns10 .col10 { width: 10%; }
  14. .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%; }
  15. .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%; }
  16.  
  17. /*= For IE */
  18. .columns2  .col2  { *width: 49.9%; }
  19. .columns4  .col4  { *width: 24.9%; }
  20. .columns5  .col5  { *width: 19.9%; }
  21. .columns8  .col8  { *width: 12.4%; }
  22. .columns10 .col10 { *width:  9.9%; }
  23.  
  24. /*= Columns span */
  25. .columns1  .span1 { width: 100%; }
  26.  
  27. .columns2  .span1 { width: 50%; *width: 49.9%; }
  28. .columns2  .span2 { width: 100%;               }
  29.  
  30. .columns3  .span1 { width: 33.3%; }
  31. .columns3  .span2 { width: 66.6%; }
  32. .columns3  .span3 { width: 100%;  }
  33.  
  34. .columns4  .span1 { width: 25%; *width: 24.9%; }
  35. .columns4  .span2 { width: 50%; *width: 49.9%; }
  36. .columns4  .span3 { width: 75%; *width: 74.9%; }
  37. .columns4  .span4 { width: 100%;               }
  38.  
  39. .columns5  .span1 { width: 20%; *width: 19.9%; }
  40. .columns5  .span2 { width: 40%; *width: 39.9%; }
  41. .columns5  .span3 { width: 60%; *width: 59.9%; }
  42. .columns5  .span4 { width: 80%; *width: 79.9%; }
  43. .columns5  .span5 { width: 100%;               }
  44.  
  45. .columns6  .span1 { width: 16.6%; }
  46. .columns6  .span2 { width: 33.3%; }
  47. .columns6  .span3 { width: 49.9%; }
  48. .columns6  .span4 { width: 66.6%; }
  49. .columns6  .span5 { width: 83.3%; }
  50. .columns6  .span6 { width: 100%;  }
  51.  
  52. .columns7  .span1 { width: 14.2%; }
  53. .columns7  .span2 { width: 28.5%; }
  54. .columns7  .span3 { width: 42.8%; }
  55. .columns7  .span4 { width: 57.1%; }
  56. .columns7  .span5 { width: 71.4%; }
  57. .columns7  .span6 { width: 85.6%; }
  58. .columns7  .span7 { width: 100%;  }
  59.  
  60. .columns8  .span1 { width: 12.5%  *width: 12.4%; }
  61. .columns8  .span2 { width: 25%;   *width: 24.9%; }
  62. .columns8  .span3 { width: 37.5%; *width: 37.4%; }
  63. .columns8  .span4 { width: 50%;   *width: 49.9%; }
  64. .columns8  .span5 { width: 62.5%; *width: 62.4%; }
  65. .columns8  .span6 { width: 85%;   *width: 84.9%; }
  66. .columns8  .span7 { width: 97.5%; *width: 97.4%; }
  67. .columns8  .span8 { width: 100%;                 }
  68.  
  69. .columns9  .span1 { width: 11.1%; }
  70. .columns9  .span2 { width: 22.2%; }
  71. .columns9  .span3 { width: 33.3%; }
  72. .columns9  .span4 { width: 44.4%; }
  73. .columns9  .span5 { width: 55.5%; }
  74. .columns9  .span6 { width: 66.6%; }
  75. .columns9  .span7 { width: 77.7%; }
  76. .columns9  .span8 { width: 88.8%; }
  77. .columns9  .span9 { width: 100%;  }
  78.  
  79. .columns10 .span1  { width: 10%; *width:  9.9%; }
  80. .columns10 .span2  { width: 20%; *width: 19.9%; }
  81. .columns10 .span3  { width: 30%; *width: 29.9%; }
  82. .columns10 .span4  { width: 40%; *width: 39.9%; }
  83. .columns10 .span5  { width: 50%; *width: 49.9%; }
  84. .columns10 .span6  { width: 60%; *width: 59.9%; }
  85. .columns10 .span7  { width: 70%; *width: 69.9%; }
  86. .columns10 .span8  { width: 80%; *width: 79.9%; }
  87. .columns10 .span9  { width: 90%; *width: 89.9%; }
  88. .columns10 .span10 { width: 100%;               }
  89.  
  90. .columns11 .span1  { width:  9.0%; }
  91. .columns11 .span2  { width: 18.1%; }
  92. .columns11 .span3  { width: 27.2%; }
  93. .columns11 .span4  { width: 36.3%; }
  94. .columns11 .span5  { width: 45.4%; }
  95. .columns11 .span6  { width: 54.5%; }
  96. .columns11 .span7  { width: 63.6%; }
  97. .columns11 .span8  { width: 73.7%; }
  98. .columns11 .span9  { width: 81.8%; }
  99. .columns11 .span10 { width: 90.9%; }
  100. .columns11 .span11 { width: 100%;  }
  101.  
  102. .columns12 .span1  { width:  8.3%; }
  103. .columns12 .span2  { width: 16.6%; }
  104. .columns12 .span3  { width: 24.9%; }
  105. .columns12 .span4  { width: 33.3%; }
  106. .columns12 .span5  { width: 41.6%; }
  107. .columns12 .span6  { width: 49.9%; }
  108. .columns12 .span7  { width: 58.3%; }
  109. .columns12 .span8  { width: 66.6%; }
  110. .columns12 .span9  { width: 74.9%; }
  111. .columns12 .span10 { width: 83.3%; }
  112. .columns12 .span11 { width: 91.6%; }
  113. .columns12 .span12 { width: 100%;  }
  114.  
  115. /*= multi-columns list (2-12) */
  116. ul.columns2  li, ol.columns2  li, dl.columns2  dd {
  117.     float: left;
  118.     width: 50%;
  119.     *width: 49.9%;
  120. }
  121. ul.columns3  li, ol.columns3  li, dl.columns3  dd {
  122.     float: left;
  123.     width: 33.3%;
  124. }
  125. ul.columns4  li, ol.columns4  li, dl.columns4  dd {
  126.     float: left;
  127.     width: 25%;
  128.     *width: 24.9%;
  129. }
  130. ul.columns5  li, ol.columns5  li, dl.columns5  dd {
  131.     float: left;
  132.     width: 20%;
  133.     *width: 19.9%;
  134. }
  135. ul.columns6  li, ol.columns6  li, dl.columns6  dd {
  136.     float: left;
  137.     width: 16.6%;
  138. }
  139. ul.columns7  li, ol.columns7  li, dl.columns7  dd {
  140.     float: left;
  141.     width: 14.2%;
  142. }
  143. ul.columns8  li, ol.columns8  li, dl.columns8  dd {
  144.     float: left;
  145.     width: 12.5%;
  146.     *width: 12.4%;
  147. }
  148. ul.columns9  li, ol.columns9  li, dl.columns9  dd {
  149.     float: left;
  150.     width: 11.1%;
  151. }
  152. ul.columns10 li, ol.columns10 li, dl.columns10 dd {
  153.     float: left;
  154.     width: 10%;
  155.     *width: 9.9%;
  156. }
  157. ul.columns11 li, ol.columns11 li, dl.columns11 dd {
  158.     float: left;
  159.     width: 9.0%;
  160. }
  161. ul.columns12 li, ol.columns12 li, dl.columns12 dd {
  162.     float: left;
  163.     width: 8.3%;
  164. }
  165.  
  166. /*= Clear float */
  167. .clearfloat {
  168.     display: block;
  169.     clear: both;
  170.     height: 0;
  171.     overflow: hidden;
  172.     font: 0/0 sans-serif;
  173. }
  174. .clearfix { zoom: 1; }
  175. .clearfix:after {
  176.     content: ".";
  177.     clear: both;
  178.     display: block;
  179.     height: 0;
  180.     visibility: hidden;
  181. }
  182.  
  183. EXAMPLE:
  184. <div class="clearfix columns4 yourClassName">
  185.   <div class="cols1 yourClassName1">...</div>
  186.   <div class="cols2 yourClassName2">...</div>
  187.   <div class="cols3 yourClassName3">...</div>
  188.   <div class="cols4 yourClassName4">...</div>
  189. </div>
  190.  
  191. <div class="columns2 yourClassName">
  192.   <div class="cols1 yourClassName1">...</div>
  193.   <div class="cols2 yourClassName2">...</div>
  194.   <div class="clearfloat"></div>
  195. </div>
  196.  
  197. <ul class="clearfix columns2">
  198.   <li>...</li><li>...</li><li>...</li><li>...</li><li>...</li><li>...</li>
  199. </ul>
  200.  
  201. <dl class="clearfix columns3">
  202.   <dt>...</dt>
  203.   <dd>...</dd><dd>...</dd><dd>...</dd><dd>...</dd><dd>...</dd><dd>...</dd>
  204. </dl>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.