Question:

Need help with some CSS

by | earlier

<html>

<head>

<style>



</style>

</head>

<body>

<div class="chatarea"></div>

</body>

</html>

Problem? Long unbroken words that go beyond the end of the box force the horizontal scroll bar out, and I don't want that. In fact, I don't want a horizontal scroll bar to be visible at all.

I also want the vertical scroll bar to have the text scrolled to the bottom initially (when content is added into the <div>, of course).

How do I do all of that?

Tags:

Report

Answer The Question I've Same Question Too

Follow Question

2 ANSWERS

Sort By: Date | Rating

You need to use word-wrap, you should add the following to your division/class.

-----StartCode-----

  white-space: pre-wrap;       /* css-3 */

  white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */

  white-space: -pre-wrap;      /* Opera 4-6 */

  white-space: -o-pre-wrap;    /* Opera 7 */

  word-wrap: break-word;       /* Internet Explorer 5.5+ */

-----CodeEnd-----

Unbroken words has always been a problem to some degree, some use javascript to solve the problem, but i prefer the css solution.

Luckily browser support has been increased a lot doing the last few years, so you might not need all of the above properties. I just left them in place as a reference.

The I.E. "-moz-" are experimental properties, meaning that support for them might not be complete.

Also note that your css is buggy, you did not use a unit of measurement, you need to define what length unit you are using. The only time where you dont need it, is when the value is "0".

I recommend that you do not use "cm" as a length unit, since it doesn't have its practical use in layouting pages.

See also: http://www.brugbart.com/References/53/ - Units of Measurement

-----StartCode-----

.chatarea {

margin-right: 3em;

position: relative;

width: 512px;

height: 256px;

border-style: inset;

border-width: 6;

padding-left: 4px;

padding-right: 4px;

padding-top: 1px;

padding-bottom: 1px;

  white-space: pre-wrap;       /* css-3 */

  white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */

  white-space: -pre-wrap;      /* Opera 4-6 */

  white-space: -o-pre-wrap;    /* Opera 7 */

  word-wrap: break-word;       /* Internet Explorer 5.5+ */

}

-----CodeEnd-----

You should also make sure to include a valid doctype, less important is the missing, but required "lang" attribute on your html element, but i still recommend you include it.

See also:

http://www.brugbart.com/Tutorials/1/ - An Introduction to HTML

http://www.brugbart.com/Articles/4/ - The Importance of Doctypes

You should also include a title of your page, see: http://www.brugbart.com/References/82/ - The title Tag

The default value of the overflow property is auto, so its pointless to declare it again, i suggest you simply remove it. If for whatever reason it doesn't work, then try setting it as "overflow: hidden;" which will get rid of any scroll-bars.

Also note that its easier to use "padding" instead of setting the padding for each side, the syntax is "padding: top right bottom left;" Where you would replace the top/right/bottom/left with a length unit. I.E.

-----StartCode-----

padding: 1px 4px 1px 4px;

-----CodeEnd-----

Padding uses the same syntax as margin.

However i suggest you use a containing box instead, since padding tend to bug around.

The "border" can be set the following way.

-----StartCode-----

border: 6px inset black;

-----CodeEnd-----

The last value can be either HEX RGB or KEYWORD, where in above example i used a keyword.
Report (0) (0) |   earlier
Try overflow: auto;

like

.chatarea

{

margin-right: 3cm;

position: relative;

width: 200px;

height: 200px;

border-style: inset;

border-width: 6;

padding-left: 4;

padding-right: 4;

padding-top: 1;

padding-bottom: 1;

overflow: auto;

}

NOTE: I changed the height and width of your div for my testing purposes only.
Report (0) (0) | earlier