adammck · March 1, 2014 19:19
diff --git a/index.html b/index.html
 <!DOCTYPE html>

 <html>
  <head>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
      }

      #container {
        width: 900px;
        padding: 20px;
        margin: 0 auto;
        background: #aaa;
      }

      @media (min-width: 460px)  and (max-width: 679px)  { #container { width: 460px;  } }
      @media (min-width: 680px)  and (max-width: 899px)  { #container { width: 680px;  } }
      @media (min-width: 900px)  and (max-width: 1119px) { #container { width: 900px;  } }
      @media (min-width: 1120px) and (max-width: 1339px) { #container { width: 1120px; } }
      @media (min-width: 1340px) and (max-width: 1559px) { #container { width: 1340px; } }
      @media (min-width: 1560px) and (max-width: 1779px) { #container { width: 1560px; } }
      @media (min-width: 1780px) and (max-width: 1999px) { #container { width: 1780px; } }
      @media (min-width: 2000px) and (max-width: 2219px) { #container { width: 2000px; } }
      @media (min-width: 2220px)                         { #container { width: 2220px; } }

      header {
        height: 100px;
        margin-bottom: 20px;
        background: #fff;
      }

      footer {
        height: 50px;
        margin-top: 20px;
        background: #fff;
      }

      .things {
        /*background: red;*/
        margin: -10px;
      }

      /* clear floats */
        .things:before, .things:after {
          content: " ";
          display: table;
        }

        .things:after {
          clear: both;
        }
      /* -- */

      .thing {
        float: left;
        width: 200px;
        height: 200px;
        margin: 10px;
        background: #fff;
        color: #ccc;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <header>
        Header
      </header>

      <div class="things">
        <div class="thing">aw3Ya8ae</div>
        <div class="thing">Kie8Tie3</div>
        <div class="thing">Reep3ohj</div>
        <div class="thing">aimoor5E</div>
        <div class="thing">Ieph6rek</div>
        <div class="thing">hee4Bae2</div>
        <div class="thing">Phuvon5K</div>
        <div class="thing">foo2Ean5</div>
        <div class="thing">loo4Iesu</div>
        <div class="thing">eiQu9bei</div>
        <div class="thing">Oibah0Lu</div>
        <div class="thing">viequ6Bi</div>
        <div class="thing">shu8Ahqu</div>
        <div class="thing">Riequ8oh</div>
        <div class="thing">Aid9eiG2</div>
        <div class="thing">uoS4heuf</div>
      </div>

      <footer>
        Footer
      </footer>
    </div>
  </body>
 </html>
	<!DOCTYPE html>

	<html>
	<head>
	<style>
	* {
	box-sizing: border-box;
	}

	body {
	margin: 0;
	}

	#container {
	width: 900px;
	padding: 20px;
	margin: 0 auto;
	background: #aaa;
	}

	@media (min-width: 460px) and (max-width: 679px) { #container { width: 460px; } }
	@media (min-width: 680px) and (max-width: 899px) { #container { width: 680px; } }
	@media (min-width: 900px) and (max-width: 1119px) { #container { width: 900px; } }
	@media (min-width: 1120px) and (max-width: 1339px) { #container { width: 1120px; } }
	@media (min-width: 1340px) and (max-width: 1559px) { #container { width: 1340px; } }
	@media (min-width: 1560px) and (max-width: 1779px) { #container { width: 1560px; } }
	@media (min-width: 1780px) and (max-width: 1999px) { #container { width: 1780px; } }
	@media (min-width: 2000px) and (max-width: 2219px) { #container { width: 2000px; } }
	@media (min-width: 2220px) { #container { width: 2220px; } }

	header {
	height: 100px;
	margin-bottom: 20px;
	background: #fff;
	}

	footer {
	height: 50px;
	margin-top: 20px;
	background: #fff;
	}

	.things {
	/background: red;/
	margin: -10px;
	}

	/* clear floats */
	.things:before, .things:after {
	content: " ";
	display: table;
	}

	.things:after {
	clear: both;
	}
	/* -- */

	.thing {
	float: left;
	width: 200px;
	height: 200px;
	margin: 10px;
	background: #fff;
	color: #ccc;
	}
	</style>
	</head>
	<body>
	<div id="container">
	<header>
	Header
	</header>

	<div class="things">
	<div class="thing">aw3Ya8ae</div>
	<div class="thing">Kie8Tie3</div>
	<div class="thing">Reep3ohj</div>
	<div class="thing">aimoor5E</div>
	<div class="thing">Ieph6rek</div>
	<div class="thing">hee4Bae2</div>
	<div class="thing">Phuvon5K</div>
	<div class="thing">foo2Ean5</div>
	<div class="thing">loo4Iesu</div>
	<div class="thing">eiQu9bei</div>
	<div class="thing">Oibah0Lu</div>
	<div class="thing">viequ6Bi</div>
	<div class="thing">shu8Ahqu</div>
	<div class="thing">Riequ8oh</div>
	<div class="thing">Aid9eiG2</div>
	<div class="thing">uoS4heuf</div>
	</div>

	<footer>
	Footer
	</footer>
	</div>
	</body>
	</html>