Posted By

andyr on 03/05/11


Tagged


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

wirenaught


CSS 960 Grid (24 col)


 / Published in: CSS
 

  1. /*
  2. 960 Grid System ~ Core CSS.
  3. Learn more ~ http://960.gs/
  4.  
  5. Licensed under GPL and MIT.
  6. */
  7.  
  8. /*
  9. Forces backgrounds to span full width,
  10. even if there is horizontal scrolling.
  11. Increase this if your layout is wider.
  12.  
  13. Note: IE6 works fine without this fix.
  14. */
  15.  
  16. body {
  17. min-width: 960px;
  18. }
  19.  
  20. /* `Container >> 24 Columns
  21. ----------------------------------------------------------------------------------------------------*/
  22. .container_24 {
  23. margin-left: auto;
  24. margin-right: auto;
  25. width: 960px;
  26. }
  27.  
  28. /* `Grid >> Global
  29. ----------------------------------------------------------------------------------------------------*/
  30.  
  31. .grid_1,
  32. .grid_2,
  33. .grid_3,
  34. .grid_4,
  35. .grid_5,
  36. .grid_6,
  37. .grid_7,
  38. .grid_8,
  39. .grid_9,
  40. .grid_10,
  41. .grid_11,
  42. .grid_12,
  43. .grid_13,
  44. .grid_14,
  45. .grid_15,
  46. .grid_16,
  47. .grid_17,
  48. .grid_18,
  49. .grid_19,
  50. .grid_20,
  51. .grid_21,
  52. .grid_22,
  53. .grid_23,
  54. .grid_24 {
  55. display: inline;
  56. float: left;
  57. margin-left: 5px;
  58. margin-right: 5px;
  59. }
  60.  
  61. .push_1, .pull_1,
  62. .push_2, .pull_2,
  63. .push_3, .pull_3,
  64. .push_4, .pull_4,
  65. .push_5, .pull_5,
  66. .push_6, .pull_6,
  67. .push_7, .pull_7,
  68. .push_8, .pull_8,
  69. .push_9, .pull_9,
  70. .push_10, .pull_10,
  71. .push_11, .pull_11,
  72. .push_12, .pull_12,
  73. .push_13, .pull_13,
  74. .push_14, .pull_14,
  75. .push_15, .pull_15,
  76. .push_16, .pull_16,
  77. .push_17, .pull_17,
  78. .push_18, .pull_18,
  79. .push_19, .pull_19,
  80. .push_20, .pull_20,
  81. .push_21, .pull_21,
  82. .push_22, .pull_22,
  83. .push_23, .pull_23 {
  84. position: relative;
  85. }
  86.  
  87. /* `Grid >> Children (Alpha ~ First, Omega ~ Last)
  88. ----------------------------------------------------------------------------------------------------*/
  89.  
  90. .alpha {
  91. margin-left: 0;
  92. }
  93.  
  94. .omega {
  95. margin-right: 0;
  96. }
  97.  
  98. /* `Grid >> 24 Columns
  99. ----------------------------------------------------------------------------------------------------*/
  100.  
  101. .container_24 .grid_1 {
  102. width: 30px;
  103. }
  104.  
  105. .container_24 .grid_2 {
  106. width: 70px;
  107. }
  108.  
  109. .container_24 .grid_3 {
  110. width: 110px;
  111. }
  112.  
  113. .container_24 .grid_4 {
  114. width: 150px;
  115. }
  116.  
  117. .container_24 .grid_5 {
  118. width: 190px;
  119. }
  120.  
  121. .container_24 .grid_6 {
  122. width: 230px;
  123. }
  124.  
  125. .container_24 .grid_7 {
  126. width: 270px;
  127. }
  128.  
  129. .container_24 .grid_8 {
  130. width: 310px;
  131. }
  132.  
  133. .container_24 .grid_9 {
  134. width: 350px;
  135. }
  136.  
  137. .container_24 .grid_10 {
  138. width: 390px;
  139. }
  140.  
  141. .container_24 .grid_11 {
  142. width: 430px;
  143. }
  144.  
  145. .container_24 .grid_12 {
  146. width: 470px;
  147. }
  148.  
  149. .container_24 .grid_13 {
  150. width: 510px;
  151. }
  152.  
  153. .container_24 .grid_14 {
  154. width: 550px;
  155. }
  156.  
  157. .container_24 .grid_15 {
  158. width: 590px;
  159. }
  160.  
  161. .container_24 .grid_16 {
  162. width: 630px;
  163. }
  164.  
  165. .container_24 .grid_17 {
  166. width: 670px;
  167. }
  168.  
  169. .container_24 .grid_18 {
  170. width: 710px;
  171. }
  172.  
  173. .container_24 .grid_19 {
  174. width: 750px;
  175. }
  176.  
  177. .container_24 .grid_20 {
  178. width: 790px;
  179. }
  180.  
  181. .container_24 .grid_21 {
  182. width: 830px;
  183. }
  184.  
  185. .container_24 .grid_22 {
  186. width: 870px;
  187. }
  188.  
  189. .container_24 .grid_23 {
  190. width: 910px;
  191. }
  192.  
  193. .container_24 .grid_24 {
  194. width: 950px;
  195. }
  196.  
  197. /* `Prefix Extra Space >> 24 Columns
  198. ----------------------------------------------------------------------------------------------------*/
  199.  
  200. .container_24 .prefix_1 {
  201. padding-left: 40px;
  202. }
  203.  
  204. .container_24 .prefix_2 {
  205. padding-left: 80px;
  206. }
  207.  
  208. .container_24 .prefix_3 {
  209. padding-left: 120px;
  210. }
  211.  
  212. .container_24 .prefix_4 {
  213. padding-left: 160px;
  214. }
  215.  
  216. .container_24 .prefix_5 {
  217. padding-left: 200px;
  218. }
  219.  
  220. .container_24 .prefix_6 {
  221. padding-left: 240px;
  222. }
  223.  
  224. .container_24 .prefix_7 {
  225. padding-left: 280px;
  226. }
  227.  
  228. .container_24 .prefix_8 {
  229. padding-left: 320px;
  230. }
  231.  
  232. .container_24 .prefix_9 {
  233. padding-left: 360px;
  234. }
  235.  
  236. .container_24 .prefix_10 {
  237. padding-left: 400px;
  238. }
  239.  
  240. .container_24 .prefix_11 {
  241. padding-left: 440px;
  242. }
  243.  
  244. .container_24 .prefix_12 {
  245. padding-left: 480px;
  246. }
  247.  
  248. .container_24 .prefix_13 {
  249. padding-left: 520px;
  250. }
  251.  
  252. .container_24 .prefix_14 {
  253. padding-left: 560px;
  254. }
  255.  
  256. .container_24 .prefix_15 {
  257. padding-left: 600px;
  258. }
  259.  
  260. .container_24 .prefix_16 {
  261. padding-left: 640px;
  262. }
  263.  
  264. .container_24 .prefix_17 {
  265. padding-left: 680px;
  266. }
  267.  
  268. .container_24 .prefix_18 {
  269. padding-left: 720px;
  270. }
  271.  
  272. .container_24 .prefix_19 {
  273. padding-left: 760px;
  274. }
  275.  
  276. .container_24 .prefix_20 {
  277. padding-left: 800px;
  278. }
  279.  
  280. .container_24 .prefix_21 {
  281. padding-left: 840px;
  282. }
  283.  
  284. .container_24 .prefix_22 {
  285. padding-left: 880px;
  286. }
  287.  
  288. .container_24 .prefix_23 {
  289. padding-left: 920px;
  290. }
  291.  
  292. /* `Suffix Extra Space >> 24 Columns
  293. ----------------------------------------------------------------------------------------------------*/
  294.  
  295. .container_24 .suffix_1 {
  296. padding-right: 40px;
  297. }
  298.  
  299. .container_24 .suffix_2 {
  300. padding-right: 80px;
  301. }
  302.  
  303. .container_24 .suffix_3 {
  304. padding-right: 120px;
  305. }
  306.  
  307. .container_24 .suffix_4 {
  308. padding-right: 160px;
  309. }
  310.  
  311. .container_24 .suffix_5 {
  312. padding-right: 200px;
  313. }
  314.  
  315. .container_24 .suffix_6 {
  316. padding-right: 240px;
  317. }
  318.  
  319. .container_24 .suffix_7 {
  320. padding-right: 280px;
  321. }
  322.  
  323. .container_24 .suffix_8 {
  324. padding-right: 320px;
  325. }
  326.  
  327. .container_24 .suffix_9 {
  328. padding-right: 360px;
  329. }
  330.  
  331. .container_24 .suffix_10 {
  332. padding-right: 400px;
  333. }
  334.  
  335. .container_24 .suffix_11 {
  336. padding-right: 440px;
  337. }
  338.  
  339. .container_24 .suffix_12 {
  340. padding-right: 480px;
  341. }
  342.  
  343. .container_24 .suffix_13 {
  344. padding-right: 520px;
  345. }
  346.  
  347. .container_24 .suffix_14 {
  348. padding-right: 560px;
  349. }
  350.  
  351. .container_24 .suffix_15 {
  352. padding-right: 600px;
  353. }
  354.  
  355. .container_24 .suffix_16 {
  356. padding-right: 640px;
  357. }
  358.  
  359. .container_24 .suffix_17 {
  360. padding-right: 680px;
  361. }
  362.  
  363. .container_24 .suffix_18 {
  364. padding-right: 720px;
  365. }
  366.  
  367. .container_24 .suffix_19 {
  368. padding-right: 760px;
  369. }
  370.  
  371. .container_24 .suffix_20 {
  372. padding-right: 800px;
  373. }
  374.  
  375. .container_24 .suffix_21 {
  376. padding-right: 840px;
  377. }
  378.  
  379. .container_24 .suffix_22 {
  380. padding-right: 880px;
  381. }
  382.  
  383. .container_24 .suffix_23 {
  384. padding-right: 920px;
  385. }
  386.  
  387. /* `Push Space >> 24 Columns
  388. ----------------------------------------------------------------------------------------------------*/
  389.  
  390. .container_24 .push_1 {
  391. left: 40px;
  392. }
  393.  
  394. .container_24 .push_2 {
  395. left: 80px;
  396. }
  397.  
  398. .container_24 .push_3 {
  399. left: 120px;
  400. }
  401.  
  402. .container_24 .push_4 {
  403. left: 160px;
  404. }
  405.  
  406. .container_24 .push_5 {
  407. left: 200px;
  408. }
  409.  
  410. .container_24 .push_6 {
  411. left: 240px;
  412. }
  413.  
  414. .container_24 .push_7 {
  415. left: 280px;
  416. }
  417.  
  418. .container_24 .push_8 {
  419. left: 320px;
  420. }
  421.  
  422. .container_24 .push_9 {
  423. left: 360px;
  424. }
  425.  
  426. .container_24 .push_10 {
  427. left: 400px;
  428. }
  429.  
  430. .container_24 .push_11 {
  431. left: 440px;
  432. }
  433.  
  434. .container_24 .push_12 {
  435. left: 480px;
  436. }
  437.  
  438. .container_24 .push_13 {
  439. left: 520px;
  440. }
  441.  
  442. .container_24 .push_14 {
  443. left: 560px;
  444. }
  445.  
  446. .container_24 .push_15 {
  447. left: 600px;
  448. }
  449.  
  450. .container_24 .push_16 {
  451. left: 640px;
  452. }
  453.  
  454. .container_24 .push_17 {
  455. left: 680px;
  456. }
  457.  
  458. .container_24 .push_18 {
  459. left: 720px;
  460. }
  461.  
  462. .container_24 .push_19 {
  463. left: 760px;
  464. }
  465.  
  466. .container_24 .push_20 {
  467. left: 800px;
  468. }
  469.  
  470. .container_24 .push_21 {
  471. left: 840px;
  472. }
  473.  
  474. .container_24 .push_22 {
  475. left: 880px;
  476. }
  477.  
  478. .container_24 .push_23 {
  479. left: 920px;
  480. }
  481.  
  482. /* `Pull Space >> 24 Columns
  483. ----------------------------------------------------------------------------------------------------*/
  484.  
  485. .container_24 .pull_1 {
  486. left: -40px;
  487. }
  488.  
  489. .container_24 .pull_2 {
  490. left: -80px;
  491. }
  492.  
  493. .container_24 .pull_3 {
  494. left: -120px;
  495. }
  496.  
  497. .container_24 .pull_4 {
  498. left: -160px;
  499. }
  500.  
  501. .container_24 .pull_5 {
  502. left: -200px;
  503. }
  504.  
  505. .container_24 .pull_6 {
  506. left: -240px;
  507. }
  508.  
  509. .container_24 .pull_7 {
  510. left: -280px;
  511. }
  512.  
  513. .container_24 .pull_8 {
  514. left: -320px;
  515. }
  516.  
  517. .container_24 .pull_9 {
  518. left: -360px;
  519. }
  520.  
  521. .container_24 .pull_10 {
  522. left: -400px;
  523. }
  524.  
  525. .container_24 .pull_11 {
  526. left: -440px;
  527. }
  528.  
  529. .container_24 .pull_12 {
  530. left: -480px;
  531. }
  532.  
  533. .container_24 .pull_13 {
  534. left: -520px;
  535. }
  536.  
  537. .container_24 .pull_14 {
  538. left: -560px;
  539. }
  540.  
  541. .container_24 .pull_15 {
  542. left: -600px;
  543. }
  544.  
  545. .container_24 .pull_16 {
  546. left: -640px;
  547. }
  548.  
  549. .container_24 .pull_17 {
  550. left: -680px;
  551. }
  552.  
  553. .container_24 .pull_18 {
  554. left: -720px;
  555. }
  556.  
  557. .container_24 .pull_19 {
  558. left: -760px;
  559. }
  560.  
  561. .container_24 .pull_20 {
  562. left: -800px;
  563. }
  564.  
  565. .container_24 .pull_21 {
  566. left: -840px;
  567. }
  568.  
  569. .container_24 .pull_22 {
  570. left: -880px;
  571. }
  572.  
  573. .container_24 .pull_23 {
  574. left: -920px;
  575. }
  576.  
  577. /* `Clear Floated Elements
  578. ----------------------------------------------------------------------------------------------------*/
  579.  
  580. /* http://sonspring.com/journal/clearing-floats */
  581.  
  582. .clear {
  583. clear: both;
  584. display: block;
  585. overflow: hidden;
  586. visibility: hidden;
  587. width: 0;
  588. height: 0;
  589. }
  590.  
  591. /* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
  592.  
  593. .clearfix:before,
  594. .clearfix:after {
  595. content: '\0020';
  596. display: block;
  597. overflow: hidden;
  598. visibility: hidden;
  599. width: 0;
  600. height: 0;
  601. }
  602.  
  603. .clearfix:after {
  604. clear: both;
  605. }
  606.  
  607. /*
  608. The following zoom:1 rule is specifically for IE6 + IE7.
  609. Move to separate stylesheet if invalid CSS is a problem.
  610. */
  611.  
  612. .clearfix {
  613. zoom: 1;
  614. }

Report this snippet  

You need to login to post a comment.