pre tag- text overflows the box SOLVED but for ie6 (ie7 not tested)

Answer 1

You are not putting semicolons at the ends of the lines, which is required (except on the last line) for CSS to parse correctly.

Answer 2

Beyond the semi-colon issue, the one important thing the pre tag does is set the CSS white-space property to "nowrap" (or "pre" I suppose, but that just confuses things), so it's working exactly as it should. If yo want to stop it from working like that, set "nowrap: normal;". However, that makes the pre element work like every other element instead of how it's intended to work, which might confuse other people working with you. Why not just use a div element? What are you trying to achieve?

Answer 3

If I'm reading your question correctly, you want to display code/text contained within a box, and that code cannot wrap (unless such wraps, or carriage-returns/line-feeds/etc are present in the code/text itself). You also want the containing element to increase its horizontal dimension in order to expand to the required width of the text/code?

So if your text had 20 characters as its longest line, your <pre> would be at least 20 characters in width, if the text had 200 characters for the longest line then it should stretch to accommodate the 200 characters?

If these assumptions are correct, then you can't -without javascript, at least- do what you want to do, since it would require setting the width of the parent based on the width of its child element. Unfortunately CSS cascades down the DOM, and in one-way only.

The best you could do, without JS, is to add:

overflow: scroll; /* or auto */

or:

overflow-x: scroll;

to your CSS, which would maintain the width of the <pre>, but allow for scrolling to allow for the longest lines to remain un-wrapped.

If I've misunderstood your question, please raise a comment, and I'll do what I can to address your question more usefully.