half page's width background

Question

I'm trying to create a menu which is divided by 50% width.
this is what i've been trying so far:
http://jsbin.com/gobacewovu/1

so, as you can see, my problem is that the "search" text is invisible. I noticed this problem and created another page, using a "menu" class.
http://jsbin.com/melekitata/1

the problem is now bigger. I was even looking for a solution in this site but I have not found a solution yet, though.

does anyone can help me with that, I'm seriously stuck. thanks.

Answer 1

It is because #look has fixed position, you would need to give #search position: relative; z-index: 1; position: relative; z-index: 1; to place it higher up the stacking order.

CSS

#search {
  position: relative;
  z-index: 1;
}

I'm not completely sure what you are trying to achieve with this layout however but if you give me some more info I can help you.