text flows out of the divs border?

[zyph]

Hi,

I have this very small, but irritating problem for me. The normal paragraphs stays inside, but the text within <pre> tags goes out of the border?

#left {
 width: 500px;
 margin-left: 20px;
 padding: 7px;
 float: left;
}
pre {
    width: 490px;
    background-color: #F1F6FA;
    line-height: 20px;
    color: #222;
}

[iamlost]

"width" in <pre> is (1) deprecated, (2) not widely supported, and (3) meant to be number of characters not any other measurement.

[w3.org ]

<pre> is supposed to display text that is "preformatted" and expected to be displayed "as written":

This will run over in your example:

<pre>Hello here we go again and what fun it is Hello here we go again and what fun it is</pre>

This will not:

<pre>Hello here we go again and what fun it is
Hello here we go again and what fun it is</pre>

You are expected to "pre"format lines and indents as required.

[drbrain]

Be default, content that overflows its box is visible. You can set the overflow property to 'auto' which will cause scroll bars to appear when needed, 'scroll' to always show scrollbars, useable or not, or 'hidden' which will cut off overflowing text.

pre {
overflow: auto;
...
}

[drbrain]

Using pre { width: <value>; } is supported and valid, as that's the alternative to setting its width in the markup.

[iamlost]

From link to W3C above (emphasis is mine):

width = number [CN]
Deprecated. This attribute provides a hint to visual user agents about the desired width of the formatted block. The user agent can use this information to select an appropriate font size or to indent the content appropriately. The desired width is expressed in number of characters. This attribute is not widely supported currently.

XHTML 1.1 totally removes width attribute from <pre>. HTML 4.01 and XHTML 1.0 list it as deprecated.

That you can "hide"/"scroll" poorly formatted <pre> seems to miss the point of the tag. <pre> requires appropriate preset line breaks or will overflow. Changing "width" affects little/nothing (in example discussed above).

drbrain:
If you can provide a link that says different please post it.

[drbrain]

Don't confuse HTML with CSS. <pre width=5>...</pre> is deprecated per HTML4, pre { width: <value>} or <pre style="width: <value>"> are not, since they are CSS.

CSS Validator for pre { width: <length> } [jigsaw.w3.org]

From CSS2's 'width' property [w3.org]:

'width'
Applies to: all elements but non-replaced inline elements, table rows, and row groups

The default CSS for pre is:

pre {
display: block;
white-space: pre;
}

Which is none of the exceptions for width.

Oh, please read about the 'overflow' property [w3.org].

[iamlost]

drbrain:
Thank you.

I wandered some more through w3c (your links and others) and re-read the Moz html.css and I was so busy being right I was wrong.

The one small (but important) point I still disagree with you is how best to solve the line length overflowing the div (the problem that is the point of the thread):

<pre> being default {whitespace: pre;} - that is after all the point of <pre> - all line breaks and spaces are rendered exactly as they appear in the HTML except that a newline immediately after the start tag <pre> and/or immediately before the end tag </pre> is discarded.

Therefore the designer is responsible for formatting the fit: i.e. writing the <pre> content in the HTML to be fully visible within the containing div.

Or, as you say, adding overflow: auto/hidden/scroll; (personally I think this renders the purpose of <pre> pointless as the look desired is not readily viewable).

zyph:
I hope you learned something that helps from this thrashing about. I did.

[zyph]

Thanks alot for your help both of you, I really appreciate it.

Now that I've read your answers, I can of course see that's it is perfectly logical why it overflows.
As I don't want scrollbars, I just preformatted the text and extended the width for my box a little.

Note:
I'm from Denmark, and I must say that the level here higher than any danish forum I have ever seen.
Not only the level of all your skills, but how you write polite and such.

Thank you ;)