Negative margin, z-index and click blocking

Question

I use negative fields to arrange 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+, a flag cannot be #right-columnclicked because it captures a click before it starts using that flag.

I tried to manipulate the z-index, but no luck.

Any idea how to make this work?

Answer 1

When you change the positioning of the properties in the CSS (for example top, left, bottom, rightor z-index) you need to specify the property position, other than static(the default).

So, change the CSS z-indexand position.

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