Posted By

Ashung on 07/19/08


Tagged

css layout grid MultiColumns


Versions (?)

Who likes this?

7 people have marked this snippet as a favorite

romanos
SpinZ
LeeRJohnson
vitech
assaado
Winkyboy
Bonik


CSS multi columns layout


 / Published in: CSS
 

CSS multi columns layout

  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
Posted By: Winkyboy on July 28, 2009

There is a typo in the examples; the divs with class="cols should read class="col

You need to login to post a comment.