Question

I have a header div, fixed position at the top of the page.

Inside it are some divs floated left and some divs floated right, all with links. I have another div that I want to be centered on the page, vertically positioned between them.

Diagram:

DivA  DivB         PageCenteredDiv     DivC DivD DivE

I have the page centered div working great:

width:      100%;
text-align: center;
position:   fixed;
top:        0;
left:       0;

But, no matter what I do with z-index on any of the divs, the links in the floated divs are below the centered div and cannot be clicked.

Is there any way to get those floating divs above the other div?

Any help would be appreciated!

Answer 1

If you can set a width on the centered div:

left: 50%;
margin-left: -150px;
position: absolute;
text-align: center;
top: 0;
width: 300px;

This would make the 300px-wide div centered inside the header, while keeping it from overlapping onto the floated divs on the sides. You can obviously choose the width according to the contents.

Edit: I’ve cooked up a quick demo on JSFiddle so you can see it working: http://jsfiddle.net/MartinodF/2gXKP/