Hola zitalk, respecto a CSS tu piensa como si tuvieras un montón de cuadros de papel de distintos tamaños.
quieres poner:
uno con usuarios online.
uno con el chat.
Todo centrado.
Entonces coge y pones un cuadro que lo englobe. ese cuadro ponle width:100% y height el que quieras.
Dentro de ese cuadro pones ahora los dos cuadros que quieres poner uno de ellos, el de mas a la izquierda, le pones float left para que el otro no se quede abajo(usuarios y chat). Y ninguno con position absolute.
como chat se compone de 2, ponle otro cuadro que contenga a esos 2 para que cuando los muevas se muevan en conjunto.
ahora, a cada cuadro (chat y usuarios) le pones el ancho que quieras en porcentaje, así cuando la ventana se ponga más pequeña, todo eso decrecerá. (ponle un minimo con min.width y max-width para definir una minima resolución.
Ahora la parte del centrado, que hay varias formas.
Puedes usar Padding, que es el hueco interno que deja el cuadro para mostrar su contenido. qué pasa, que firefox 2 peta con padding.
Puedes usar margin-left, ¿como?, en la caja usuarios, que es la que esta más pegada al left, usas un porcentaje de margen, ¿cual?, pues si usuarios:20% y chat:70%, te queda un 10%, por tanto para que quede centrado el margin left será el 5%, y queda todo centrado hasta cuando cambias de tamaño la ventana.
Si tienes más dudas, me lo dices, te pongo un resumencillo en codigo sin probarlo:
Código PHP:
<div class="contenedor_completo">
...<div class="userol" style="margin-left:4%; float:left;'>codigo para usuarios</div>
...<div class="contenedor_chat" style="margin-left:1%;'>
......<div class="chat" style="margin-bottom:1%; clear:left;'>codigo del chat</div>
......<div class="subchat">codigo del input del chat</div>
...</div>
</div>