title: How to position checkbox and text
body: <p>I'm having some trouble positioning these checkboxes with its respective text.</p>
  
  <p>The actual checkboxes were hidden so that a personal style could be used.</p>
  
  <p>Anyway, this is purely a CSS issue. The text should be positioned in front of the checkboxes.</p>
  
  <p>I've been banging my head against the wall and couldn't do it...</p>
  
  <p>What am I missing?</p>
  
  <p>Thanks.</p>
  
  <p><a href="http://jsfiddle.net/5u2o1y1h/" rel="nofollow">JSFiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="navigation"&gt;
      &lt;form id="catform" action="#"&gt;
          &lt;div class="kat1"&gt;
              &lt;label&gt;
              &lt;input id="catswitch1" type="checkbox" onclick="shCat(1);" checked="checked"/&gt;&lt;label for="thing" style="cursor: pointer"&gt;&lt;/label&gt;
          &lt;/div&gt;
  &lt;div&gt;ITEM 1&lt;/div&gt;
          &lt;div class="kat2"&gt;
              &lt;label&gt;
              &lt;input id="catswitch2" type="checkbox" onclick="shCat(2);"/&gt;&lt;label for="thing" style="cursor: pointer"&gt;&lt;/label&gt;
          &lt;/div&gt;
  &lt;div&gt;ITEM 2&lt;/div&gt;
          &lt;div class="kat8"&gt;
              &lt;label&gt;
              &lt;input id="catswitch8" type="checkbox" onclick="shCat(8);"/&gt;&lt;label for="thing" style="cursor: pointer"&gt;&lt;/label&gt;
          &lt;/div&gt;
  &lt;div&gt;ITEM 3&lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      font-family: Arial, Helvetica, san-serif;
      font-size: 11px;
      line-height: 15px;
  }
  
  #navigation {
      left: 10px; top: 10px;
      width: 120px;
      border: 1px solid #000;
  }
  
  #navigation div {
      padding: 1px 4px 3px 1px;
      border: 1px none #000;
      margin: 0 10px 4px 0;
      height: 17px;
      width: 100%;
  }
  
  input[type=checkbox] {
  display:none;
  }
  
  input[type=checkbox] + label {
  background: #FFF;
  height: 11px;
  width: 11px;
  display:inline-block;
  padding: 0 0 0 0px;
  border: 1px solid #000;
  }
  
  input[type=checkbox]:checked + label {
  background: #000;
  height: 11px;
  width: 11px;
  display:inline-block;
  padding: 0 0 0 0px;
  border: 1px solid #000;
  }
  </code></pre>