title: Negative margin, z-index and click blocking
body: <p>I'm using negative margins to layout two columns:</p>
  
  <pre><code>&lt;div id="left-column"&gt;&lt;input type="checkbox" /&gt;&lt;/div&gt;
  &lt;div id="right-column"&gt;
      &lt;div id="right-column-inner"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>#left-column { width: 200px; float: left;}
  #right-column { margin-left: -200px; width: 100%; float: left;}
  #right-column-inner { margin-left: 200px; float: left;}
  </code></pre>
  
  <p>Unfortunately, in Opera 10.54, Safari 4 and FF 3+, the checkbox isn't clickable as the <code>#right-column</code> is capturing the click before it propogates down to the checkbox.</p>
  
  <p>I've tried manipulating the z-index but no luck.</p>
  
  <p>Any idea how to get this to work?</p>