Problem with CSS fixed div and not being able to click link next to it.

Question

EDIT: Problem was solved.. I can't believe I didn't think about that to begin with. Solution:

#message-box{position:fixed;bottom: 29px;left:0px;width: 400px;}

---- Original message :

Hi,

Here is the image: http://i242.photobucket.com/albums/ff198/Warz/divchatproblemmodified.png

(it says id=footer there but its supposed to say id=footerbar, also the bar in the very button (where you enter a message) is id=statusbar and should cover 100% width as it already does. )

I'm trying to create a buttom bar on my site with chat. The chat size should be possible to resize (change height). As you can see, above the chat I placed a div (msg-top), which means when chat is resized the msg-top should should also be moved.

If you take a look at the following image you will see the problem. The div id "footerbar" has following settings and hence cover the entire area:

#footerbar {position: fixed;bottom: 0px;left: 0px;right: 0px;}

All the divs is childs of footerbar.

Because of this, if I resize the chat box to height 100% no links can be clicked. Even with small height like on the picture, all links to the right of chat box cannot be clicked...

What can I do to solve this?

Thanks!

The other divs:

/* background opacity */
#opacity-me,#msg-top,#msg-messages,#statusbar {
  background: black;
  color: white; 
  border-top: dotted 1px white;
  opacity: .90;    
  filter: alpha(opacity="90");
  z-index: 200;
  overflow: hidden;
  overflow-y: auto;
}
#statusbar {
  position: relative;
}
#message-box{
  position:relative; 
  width: 400px;
}
#msg-top {
  overflow: hidden;
  border: 0px;
  border: dotted 1px white;
}
#msg-messages {
  padding-left: 4px;    
  padding-right: 4px;    
  height: 100px;    
  border: 0px;
}

Answer 1

give the div id=footer a height, so something like:

#footerbar {position: fixed;bottom: 0px;left: 0px;right: 0px; height:30px;}

this should fix it, just adjust the height accordingly. let me know if this works.