Zone non cliquable en utilisant "bottom: 0"

Bonjour à tous,

Je suis en train de développer une messagerie instantanée, un peu à la manière de facebook. Pour celà, j'ai besoin que toutes les conversations s'affichent en bas à droite, les unes après les autres. Je n'ai pas réussi à mettre "bottom: 0" et "float: right" ensemble. J'ai donc utilisé deux DIV différentes : un grand bloc en "bottom: 0" et, les autres DIV, en Float. Comme ceci :

#bottom_chat {
	width: 100%;
	height: 260px;
	position: fixed;
	bottom: 0;
	z-index: 3
}
.bottom_chat {
	width: 300px;
	height: 250px;
	background-color: #ffffff;
	border-top: 1px solid #333333;
	border-right: 1px solid #000000;
	border-left: 1px solid #333333;
	margin: 0 5px;
	padding: 5px;
	float: right;
	font-size: 0.9em;
	text-align: justify
}

Le soucis est que toute la zone #bottom_chat devient inutilisable, même si il y a du texte en dessous, celui-ci n'est plus cliquable. J'ai essayé de joué avec "z-index", sans succès.

http://img15.hostingpics.net/thumbs/mini_614378error.png

Si quelqu'un a une idée ...

Bonjour,
La zone #bottom_chat prend toute la largeur (width 100%), donc logiquement elle empiète sur la gauche.
Essai de lui donner une largeur auto, ça résoudra peut etre le problème.

ps: plutôt que d'utiliser un float right, as tu essayé avec un "right:0" ?

bonjour,
essai voir si pointer-events est ta solution: http://liveweave.com/94gOkc (editeur en ligne)

#bottom_chat {
	width: 100%;
	height: 260px;
	position: fixed;
	bottom: 0;
	z-index: 3;
    pointer-events:none;
}
    .bottom_chat {
      width: 300px;
      height: 250px;
      background-color: #ffffff;
      border-top: 1px solid #333333;
      border-right: 1px solid #000000;
      border-left: 1px solid #333333;
      margin: 0 5px;
      padding: 5px;
      float: right;
      font-size: 0.9em;
      text-align: justify;
      z-index:1;
      pointer-events:auto;
    }