Negative margin, z-index and click blocking

Question

I'm using negative margins to layout two columns:

<div id="left-column"><input type="checkbox" /></div>
<div id="right-column">
    <div id="right-column-inner"></div>
</div>

Css:

#left-column { width: 200px; float: left;}
#right-column { margin-left: -200px; width: 100%; float: left;}
#right-column-inner { margin-left: 200px; float: left;}

Unfortunately, in Opera 10.54, Safari 4 and FF 3+, the checkbox isn't clickable as the #right-column is capturing the click before it propogates down to the checkbox.

I've tried manipulating the z-index but no luck.

Any idea how to get this to work?

Answer 1

When you change a positioning property in CSS (such as top, left, bottom, right or z-index) you have to specify a position property other than static (the default).

So change the z-index and the position CSS properties.

#left-column { width: 200px; float: left; position:relative; z-index:100;}