dannysmith · June 5, 2012 16:11
diff --git a/grid.html b/grid.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>Grid</title>
  <style type="text/css">
  
  body { padding: 0; margin: 0; background: rgba(0,75,0,0.2); font: 10px/1.5em Helvetica, sans-serif; color: #555;}
  
  #wrapper {
    background: rgba(225,225,225,0.8);
    margin: 0 auto;
    height: 550px;
    
    max-width: 1000px;
    width: 100%;
  }
  
  /*  Left and right gutters are 12px (1.2%).
      Colums are 63px (6.3%).
      Gutters are 20px (2%).
      
      12 cols = 97.6  %
      11 cols = 89.3  %
      10 cols = 81    %
       9 cols = 72.7  %
       8 cols = 64.4  %
       7 cols = 56.1  %
       6 cols = 47.8  %
       5 cols = 39.5  %
       4 cols = 31.2  %
       3 cols = 22.9  %
       2 cols = 14.6  %
       1 cols = 6.3   %
  */
  
  #container div {
    background: rgba(255,0,0,0.2);
    height: 540px;
    padding-top: 10px;
    text-align: center;
    
    margin-right: 2%;
    width: 6.3%;
    float: left;
    box-sizing: border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
  }
  #container #col-1 {margin-left: 1.2%;}
  #container #col-12 {margin-right: 1.2%;}
  #container #col-8 {border: 5px solid red;}
  </style>
 </head>
 <body>
  <div id="wrapper">
    <div id="container">
      <div id="col-1">6.3%</div>
      <div id="col-2">6.3%</div>
      <div id="col-3">6.3%</div>
      <div id="col-4">6.3%</div>
      <div id="col-5">6.3%</div>
      <div id="col-6">6.3%</div>
      <div id="col-7">6.3%</div>
      <div id="col-8">6.3%</div>
      <div id="col-9">6.3%</div>
      <div id="col-10">6.3%</div>
      <div id="col-11">6.3%</div>
      <div id="col-12">6.3%</div>
    </div>
  </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Grid</title>
	<style type="text/css">

	body { padding: 0; margin: 0; background: rgba(0,75,0,0.2); font: 10px/1.5em Helvetica, sans-serif; color: #555;}

	#wrapper {
	background: rgba(225,225,225,0.8);
	margin: 0 auto;
	height: 550px;

	max-width: 1000px;
	width: 100%;
	}

	/* Left and right gutters are 12px (1.2%).
	Colums are 63px (6.3%).
	Gutters are 20px (2%).

	12 cols = 97.6 %
	11 cols = 89.3 %
	10 cols = 81 %
	9 cols = 72.7 %
	8 cols = 64.4 %
	7 cols = 56.1 %
	6 cols = 47.8 %
	5 cols = 39.5 %
	4 cols = 31.2 %
	3 cols = 22.9 %
	2 cols = 14.6 %
	1 cols = 6.3 %
	*/

	#container div {
	background: rgba(255,0,0,0.2);
	height: 540px;
	padding-top: 10px;
	text-align: center;

	margin-right: 2%;
	width: 6.3%;
	float: left;
	box-sizing: border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-ms-box-sizing:border-box;
	}
	#container #col-1 {margin-left: 1.2%;}
	#container #col-12 {margin-right: 1.2%;}
	#container #col-8 {border: 5px solid red;}
	</style>
	</head>
	<body>
	<div id="wrapper">
	<div id="container">
	<div id="col-1">6.3%</div>
	<div id="col-2">6.3%</div>
	<div id="col-3">6.3%</div>
	<div id="col-4">6.3%</div>
	<div id="col-5">6.3%</div>
	<div id="col-6">6.3%</div>
	<div id="col-7">6.3%</div>
	<div id="col-8">6.3%</div>
	<div id="col-9">6.3%</div>
	<div id="col-10">6.3%</div>
	<div id="col-11">6.3%</div>
	<div id="col-12">6.3%</div>
	</div>
	</div>
	</body>
	</html>
No results found