0

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 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!

Community
  • 1
  • 1
apscience
  • 7,033
  • 11
  • 55
  • 89

2 Answers2

0

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/

Semyazas
  • 2,101
  • 14
  • 14
  • Thanks! I tried margin-left, but that varies depending on the width of the name. I tried setting width of the name to 80px, but that makes no difference. How would I do this? – apscience Jul 28 '11 at 10:24
  • You could then set .personWhoSaidIt to position:absolute; see here: http://jsfiddle.net/3YrZT/ – Semyazas Jul 28 '11 at 10:40
0

try position:absolute for sidebar and middlePart

DrStrangeLove
  • 11,227
  • 16
  • 59
  • 72