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 (fluid)


 / 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. /* =Containers
  9. --------------------------------------------------------------------------------*/
  10.  
  11. .f_container_12,
  12. .f_container_16
  13. {
  14. width: 92%;
  15. margin-left: 4%;
  16. margin-right: 4%;
  17. }
  18.  
  19. .full_width{
  20. width:100%;
  21. }
  22. /* =Grid >> Global
  23. --------------------------------------------------------------------------------*/
  24.  
  25. .f_grid_1,
  26. .f_grid_2,
  27. .f_grid_3,
  28. .f_grid_4,
  29. .f_grid_5,
  30. .f_grid_6,
  31. .f_grid_7,
  32. .f_grid_8,
  33. .f_grid_9,
  34. .f_grid_10,
  35. .f_grid_11,
  36. .f_grid_12,
  37. .f_grid_13,
  38. .f_grid_14,
  39. .f_grid_15,
  40. .f_grid_16
  41. {
  42. display: inline;
  43. float: left;
  44. margin-left: 1%;
  45. margin-right: 1%;
  46. }
  47.  
  48. .f_container_12 .f_grid_3,
  49. .f_container_16 .f_grid_4
  50. {
  51. width: 23%;
  52. }
  53.  
  54. .f_container_12 .f_grid_6,
  55. .f_container_16 .f_grid_8
  56. {
  57. width: 48%;
  58. }
  59.  
  60. .f_container_12 .f_grid_9,
  61. .f_container_16 .f_grid_12
  62. {
  63. width: 73%;
  64. }
  65.  
  66. .f_container_12 .f_grid_12,
  67. .f_container_16 .f_grid_16
  68. {
  69. width: 98%;
  70. }
  71.  
  72. /* =Grid >> Children (Alpha ~ First, Omega ~ Last)
  73. --------------------------------------------------------------------------------*/
  74.  
  75. .alpha
  76. {
  77. margin-left: 0;
  78. }
  79.  
  80. .omega
  81. {
  82. margin-right: 0;
  83. }
  84.  
  85. /* =Grid >> 12 Columns
  86. --------------------------------------------------------------------------------*/
  87.  
  88. .f_container_12 .f_grid_1
  89. {
  90. width: 6.333%;
  91. }
  92.  
  93. .f_container_12 .f_grid_2
  94. {
  95. width: 14.666%;
  96. }
  97.  
  98. .f_container_12 .f_grid_4
  99. {
  100. width: 31.333%;
  101. }
  102.  
  103. .f_container_12 .f_grid_5
  104. {
  105. width: 39.666%;
  106. }
  107.  
  108. .f_container_12 .f_grid_7
  109. {
  110. width: 56.333%;
  111. }
  112.  
  113. .f_container_12 .f_grid_8
  114. {
  115. width: 64.666%;
  116. }
  117.  
  118. .f_container_12 .f_grid_10
  119. {
  120. width: 81.333%;
  121. }
  122.  
  123. .f_container_12 .f_grid_11
  124. {
  125. width: 89.666%;
  126. }
  127.  
  128. /* =Grid >> 16 Columns
  129. --------------------------------------------------------------------------------*/
  130.  
  131. .f_container_16 .f_grid_1
  132. {
  133. width: 4.25%;
  134. }
  135.  
  136. .f_container_16 .f_grid_2
  137. {
  138. width: 10.5%;
  139. }
  140.  
  141. .f_container_16 .f_grid_3
  142. {
  143. width: 16.75%;
  144. }
  145.  
  146. .f_container_16 .f_grid_5
  147. {
  148. width: 29.25%;
  149. }
  150.  
  151. .f_container_16 .f_grid_6
  152. {
  153. width: 35.5%;
  154. }
  155.  
  156. .f_container_16 .f_grid_7
  157. {
  158. width: 41.75%;
  159. }
  160.  
  161. .f_container_16 .f_grid_9
  162. {
  163. width: 54.25%;
  164. }
  165.  
  166. .f_container_16 .f_grid_10
  167. {
  168. width: 60.5%;
  169. }
  170.  
  171. .f_container_16 .f_grid_11
  172. {
  173. width: 66.75%;
  174. }
  175.  
  176. .f_container_16 .f_grid_13
  177. {
  178. width: 79.25%;
  179. }
  180.  
  181. .f_container_16 .f_grid_14
  182. {
  183. width: 85.5%;
  184. }
  185.  
  186. .f_container_16 .f_grid_15
  187. {
  188. width: 91.75%;
  189. }
  190.  
  191. /* =Prefix Extra Space >> Global
  192. --------------------------------------------------------------------------------*/
  193.  
  194. .f_container_12 .f_prefix_3,
  195. .f_container_16 .f_prefix_4
  196. {
  197. padding-left: 25%;
  198. }
  199.  
  200. .f_container_12 .f_prefix_6,
  201. .f_container_16 .f_prefix_8
  202. {
  203. padding-left: 50%;
  204. }
  205.  
  206. .f_container_12 .f_prefix_9,
  207. .f_container_16 .f_prefix_12
  208. {
  209. padding-left: 75%;
  210. }
  211.  
  212. /* =Prefix Extra Space >> 12 Columns
  213. --------------------------------------------------------------------------------*/
  214.  
  215. .f_container_12 .f_prefix_1
  216. {
  217. padding-left: 8.333%;
  218. }
  219.  
  220. .f_container_12 .f_prefix_2
  221. {
  222. padding-left: 16.666%;
  223. }
  224.  
  225. .f_container_12 .f_prefix_4
  226. {
  227. padding-left: 33.333%;
  228. }
  229.  
  230. .f_container_12 .f_prefix_5
  231. {
  232. padding-left: 41.666%;
  233. }
  234.  
  235. .f_container_12 .f_prefix_7
  236. {
  237. padding-left: 58.333%;
  238. }
  239.  
  240. .f_container_12 .f_prefix_8
  241. {
  242. padding-left: 66.666%;
  243. }
  244.  
  245. .f_container_12 .f_prefix_10
  246. {
  247. padding-left: 83.333%;
  248. }
  249.  
  250. .f_container_12 .f_prefix_11
  251. {
  252. padding-left: 91.666%;
  253. }
  254.  
  255. /* =Prefix Extra Space >> 16 Columns
  256. --------------------------------------------------------------------------------*/
  257.  
  258. .f_container_16 .f_prefix_1
  259. {
  260. padding-left: 6.25%;
  261. }
  262.  
  263. .f_container_16 .f_prefix_2
  264. {
  265. padding-left: 12.5%;
  266. }
  267.  
  268. .f_container_16 .f_prefix_3
  269. {
  270. padding-left: 18.75%;
  271. }
  272.  
  273. .f_container_16 .f_prefix_5
  274. {
  275. padding-left: 31.25%;
  276. }
  277.  
  278. .f_container_16 .f_prefix_6
  279. {
  280. padding-left: 37.5%;
  281. }
  282.  
  283. .f_container_16 .f_prefix_7
  284. {
  285. padding-left: 43.75%;
  286. }
  287.  
  288. .f_container_16 .f_prefix_9
  289. {
  290. padding-left: 56.25%;
  291. }
  292.  
  293. .f_container_16 .f_prefix_10
  294. {
  295. padding-left: 62.5%;
  296. }
  297.  
  298. .f_container_16 .f_prefix_11
  299. {
  300. padding-left: 68.75%;
  301. }
  302.  
  303. .f_container_16 .f_prefix_13
  304. {
  305. padding-left: 81.25%;
  306. }
  307.  
  308. .f_container_16 .f_prefix_14
  309. {
  310. padding-left: 87.5%;
  311. }
  312.  
  313. .f_container_16 .f_prefix_15
  314. {
  315. padding-left: 93.75%;
  316. }
  317.  
  318. /* =Suffix Extra Space >> Global
  319. --------------------------------------------------------------------------------*/
  320.  
  321. .f_container_12 .f_suffix_3,
  322. .f_container_16 .f_suffix_4
  323. {
  324. padding-right: 25%;
  325. }
  326.  
  327. .f_container_12 .f_suffix_6,
  328. .f_container_16 .f_suffix_8
  329. {
  330. padding-right: 50%;
  331. }
  332.  
  333. .f_container_12 .f_suffix_9,
  334. .f_container_16 .f_suffix_12
  335. {
  336. padding-right: 75%;
  337. }
  338.  
  339. /* =Suffix Extra Space >> 12 Columns
  340. --------------------------------------------------------------------------------*/
  341.  
  342. .f_container_12 .f_suffix_1
  343. {
  344. padding-right: 8.333%;
  345. }
  346.  
  347. .f_container_12 .f_suffix_2
  348. {
  349. padding-right: 16.666%;
  350. }
  351.  
  352. .f_container_12 .f_suffix_4
  353. {
  354. padding-right: 33.333%;
  355. }
  356.  
  357. .f_container_12 .f_suffix_5
  358. {
  359. padding-right: 41.666%;
  360. }
  361.  
  362. .f_container_12 .f_suffix_7
  363. {
  364. padding-right: 58.333%;
  365. }
  366.  
  367. .f_container_12 .f_suffix_8
  368. {
  369. padding-right: 66.666%;
  370. }
  371.  
  372. .f_container_12 .f_suffix_10
  373. {
  374. padding-right: 83.333%;
  375. }
  376.  
  377. .f_container_12 .f_suffix_11
  378. {
  379. padding-right: 91.666%;
  380. }
  381.  
  382. /* =Suffix Extra Space >> 16 Columns
  383. --------------------------------------------------------------------------------*/
  384.  
  385. .f_container_16 .f_suffix_1
  386. {
  387. padding-right: 6.25%;
  388. }
  389.  
  390. .f_container_16 .f_suffix_2
  391. {
  392. padding-right: 16.5%;
  393. }
  394.  
  395. .f_container_16 .f_suffix_3
  396. {
  397. padding-right: 18.75%;
  398. }
  399.  
  400. .f_container_16 .f_suffix_5
  401. {
  402. padding-right: 31.25%;
  403. }
  404.  
  405. .f_container_16 .f_suffix_6
  406. {
  407. padding-right: 37.5%;
  408. }
  409.  
  410. .f_container_16 .f_suffix_7
  411. {
  412. padding-right: 43.75%;
  413. }
  414.  
  415. .f_container_16 .f_suffix_9
  416. {
  417. padding-right: 56.25%;
  418. }
  419.  
  420. .f_container_16 .f_suffix_10
  421. {
  422. padding-right: 62.5%;
  423. }
  424.  
  425. .f_container_16 .f_suffix_11
  426. {
  427. padding-right: 68.75%;
  428. }
  429.  
  430. .f_container_16 .f_suffix_13
  431. {
  432. padding-right: 81.25%;
  433. }
  434.  
  435. .f_container_16 .f_suffix_14
  436. {
  437. padding-right: 87.5%;
  438. }
  439.  
  440. .f_container_16 .f_suffix_15
  441. {
  442. padding-right: 93.75%;
  443. }
  444.  
  445. /* =Clear Floated Elements
  446. --------------------------------------------------------------------------------*/
  447.  
  448. /* http://sonspring.com/journal/clearing-floats */
  449.  
  450. html body * span.clear,
  451. html body * div.clear,
  452. html body * li.clear,
  453. html body * dd.clear
  454. {
  455. background: none;
  456. border: 0;
  457. clear: both;
  458. display: block;
  459. float: none;
  460. font-size: 0;
  461. list-style: none;
  462. margin: 0;
  463. padding: 0;
  464. overflow: hidden;
  465. visibility: hidden;
  466. width: 0;
  467. height: 0;
  468. }
  469.  
  470. /* http://www.positioniseverything.net/easyclearing.html */
  471.  
  472. .clearfix:after
  473. {
  474. clear: both;
  475. content: '.';
  476. display: block;
  477. visibility: hidden;
  478. height: 0;
  479. }
  480.  
  481. .clearfix
  482. {
  483. display: inline-block;
  484. }
  485.  
  486. * html .clearfix
  487. {
  488. height: 1%;
  489. }
  490.  
  491. .clearfix
  492. {
  493. display: block;
  494. }

Report this snippet  

You need to login to post a comment.