title: css arrange buttons in columns
body: <p>I'm creating an html page which controls a robot, and I'm trying to get the layout nice.</p>
  
  <p>At the moment there is a live video feed and below it a single column of 8 buttons. These buttons have CSS attributes which change their colour when they're clicked etc. I just want to be able to move the buttons to arrange them in a grid, or set of columns.</p>
  
  <p>How do I do this? Do I need to use CSS to create some columns, or is it more difficult as I'm positioning buttons not text?</p>
  
  <p>Current HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;meta name="viewport" content = "height = device-height, width = 420, user-scalable = no" /&gt; 
      &lt;title&gt;WebIOPi | Demo&lt;/title&gt;
      &lt;script type="text/javascript" src="/webiopi.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      webiopi().ready(function() {
          var content, button;
          content = $("#content");
  
          // create a "FORWARDS" labeled button for GPIO 7
          button = webiopi().createGPIOButton(7, "FORWARDS");
          content.append(button); // append button to content div
  
          // create a "REVERSE" labeled button for GPIO 8
          button = webiopi().createGPIOButton(8, "REVERSE");
          content.append(button); // append button to content div
  
          // create a "STEER LEFT" labeled button for GPIO 24
          button = webiopi().createGPIOButton(9, "STEER LEFT");
          content.append(button); // append button to content div
  
          // create a "STEER RIGHT" labeled button for GPIO 24
          button = webiopi().createGPIOButton(10, "STEER RIGHT");
          content.append(button); // append button to content div
  
          // create a "ROTATE LEFT" labeled button for GPIO 24
          button = webiopi().createGPIOButton(11, "ROTATE LEFT");
          content.append(button); // append button to content div
  
          // create a "ROTATE RIGHT" labeled button for GPIO 24
          button = webiopi().createGPIOButton(23, "ROTATE RIGHT");
          content.append(button); // append button to content div
  
          // create a "SHIFT UP" labeled button for GPIO 24
          button = webiopi().createGPIOButton(24, "SHIFT UP");
          content.append(button); // append button to content div
  
          // create a "SHIFT DOWN" labeled button for GPIO 25
          button = webiopi().createGPIOButton(25, "SHIFT DOWN");
          content.append(button); // append button to content div
  
      });
  
      &lt;/script&gt;
      &lt;style type="text/css"&gt;
          button {
              display: block;
              margin: 5px 5px 5px 5px;
              width: 200px;
              height: 45px;
              font-size: 16pt;
              font-weight: bold;
              color: black;
          }
  
          input[type="range"] {
              display: block;
              width: 160px;
              height: 45px;
          }       
          #gpio7.LOW {
              background-color: White;
          }       
          #gpio7.HIGH {
              background-color: Green;
          }
          #gpio8.LOW {
              background-color: White;
          }       
          #gpio8.HIGH {
              background-color: Red;
          }
          #gpio9.LOW {
              background-color: White;
          }       
          #gpio9.HIGH {
              background-color: Green;
          }
          #gpio10.LOW {
              background-color: White;
          }       
          #gpio10.HIGH {
              background-color: Green;
          }
          #gpio11.LOW {
              background-color: White;
          }       
          #gpio11.HIGH {
              background-color: Yellow;
          }
          #gpio23.LOW {
              background-color: White;
          }       
          #gpio23.HIGH {
              background-color: Yellow;
          }
          #gpio24.LOW {
              background-color: White;
          }       
          #gpio24.HIGH {
              background-color: Blue;
          }
          #gpio25.LOW {
              background-color: White;
          }       
          #gpio25.HIGH {
              background-color: Blue;
          }
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div style="text-align:center;"&gt;&lt;img src="http://192.168.0.14:8080/?action=stream" width="640" height="480"&gt;&lt;/div&gt;  
      &lt;div style="text-align:center;"&gt;&lt;img src="http://goo.gl/S0jnL" width="200" height="200"&gt;&lt;/div&gt;
      &lt;div id="content" align="center"&gt;&lt;/div&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>