title: Stacking divs vertically
body: <p>I'm programming a tic-tac-toe game and having trouble stacking my game tiles vertically to be  3x3 box.</p>
  
  <p>As it stands, they are 9 horizontal boxes in a row, but when I use {clear: left;} It just turns them into 9 vertical boxes.</p>
  
  <p>Here's my code so far:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  #div1 {
      width: 80px;
      height: 80px;
      padding: 10px;
      border: 1px solid #aaaaaa;
      float:left;
  
  }
  #div2 {
      width: 80px;
      height: 80px;
      padding: 10px;
      border: 1px solid #aaaaaa;
      float:left;
  }
  #div3 {
      width: 80px;
      height: 80px;
      padding: 10px;
      border: 1px solid #aaaaaa;
      float:left;
  }
  &lt;body&gt;
      &lt;p&gt;Drag the X and O images into the tic-tac-toe board:&lt;/p&gt;
      &lt;div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
      &lt;div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
      &lt;div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
  
      &lt;div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
      &lt;div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
      &lt;div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
  
      &lt;div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
      &lt;div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
      &lt;div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>