title: How do I make divs of 150x150 squares along the screen
body: <p>*and to start new rows as they fill each previous row?<br>
  this should work but doesnt for me,<br>
  html:</p>
  
  <pre><code>&lt;div id="squares"&gt;
  &lt;div id="1"&gt;
  width:150px;
  height:150px;
  &lt;/div&gt;
  &lt;div id="2"&gt;
  width:150px;
  height:150px;
  &lt;/div&gt;
  &lt;div id="3"&gt;
  width:150px;
  height:150px;
  &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>so this established 3 boxes on the page</p>
  
  <p>css:</p>
  
  <pre class="lang-css prettyprint-override"><code>#squares {
  display:inline;
  background-color:#000000;
  }
  </code></pre>
  
  <p>The css should tell them to line up and be black, so that we can see them, to guage if they are in the right place or not.<br>
  Do I need to add anything? Can you think of any different methods of achieving this outcome?</p>