CSS Layout for web chat not working

I'm trying to follow CSS How to set div height 100% minus nPx but for some reason it is not working.

I'm new to web development, so I apologize if I am doing everything in the most horrible way imaginable.

Here is the page: http://glados.cc/chat/layout.htm

The sidebar should be at the right, not sure what I'm doing wrong as I'm following the stackoverflow question I linked to at the top.

The text does wrap if it is too long, which is good! But the height that is taken doesn't 开发者_JS百科increase, which makes it overlap the next line.

Also there are no vertical scroll bars (unlike the stackoverflow answer I linked) when the content gets too long..

Thank you!

The scroll bars can only appear if there is a height or maximum height set. If that is not the case, they simply expand. Add something like height: 300px;

As for the wrapping of the chat text. This text is positioned absolute, so it is taken out of the flow of the document and cannot push other elements lower. You maybe want to consider using margin-left instead of position:absolute and left on .chatText.

And, as DrStrangeLove pointed out, your sidebar is missing the absolute positioning.

Here is an example: http://jsfiddle.net/3YrZT/1/

try position:absolute for sidebar and middlePart