text input boxes affected by overlap over underlying div. can anyone help?

hello, i got this problem with text inputs contained within an overlapping div here. i tried layering the divs with z-index, but it doesn't seem to work for me. i have two 50% width divs side by side, with a central fixed width div hovering centered above them. inside this div i have 3 text input boxes, but for some reason i can't drop the cursor into the text inputs unless i move the bottom two divs back out of the way by decreasing the width percentages of the underlying divs. anyone have any idea what i can do to fix this? i tried using the z-index property to layer the divs, but it didn't appear to do much to change the cursor over the text input issue.

 

Any reason why you need to have a third div absolutely positioned over two others? I'm sure there's another way to make the same effect which might be safer.

Plus IE has a nice z-index bug that could show in this instance.

You could maybe kinda sorta do this if you MUST have this set-up:

Have the two 50% divs (hopefully they're like 49.9% or something cause you know our good friend IE can add 50% and 50% and get like 101%) like they are, and underneath (so, next in source) have the middle div centered the usual way (margin: 0 auto; ) and then make the top margin negative until the div is visually sitting over the other two divs. So, margin: -50px auto 0 auto; or something. Give it a nice z-index too for extra luck.

Are the two 50%ers floats by any chance?