Cannot enter long lines of text for horizontal html scroll box

I want to have a scroll box on my blog so that I can show code for my readers. However, when actually pasting the code between the opening and ending "divs" the text wrapping of the entry area where you actually write the content of the code means that I can't enter lines of text that are sufficiently long that the horizontal scroll bar will actually be called 开发者_开发百科into use. The text wrapping mucks up the lines of code when the post is published. A scroll bar that should act like this

<div style="width:500px;height:300px;overflow:scroll;
border-width:2px;border-color:000000;border-style:solid;">
12345678910111213141516171819202122232425262728299999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999 
</div>

wraps the text to produce something like this ( no horizontal scrolling )

<div style="width:500px;height:300px;overflow:scroll;
border-width:2px;border-color:000000;border-style:solid;">
123456789101
112131415161718192021222324252
6272829999999999999999999999999999999999999999999999999
9999999999999999999999999999999999999999999999999999999
999999 
</div>

This can be achieved with just CSS, but semantically you are using the wrong element for a code box. You should use <pre> instead of <div> and that will automatically sort out the wrapping. Then you should be wrapping the code in <code> tags. Live example: http://jsfiddle.net/ddEPB/2/

<pre style="width:500px;height:300px;overflow:auto;border-width:2px;border-color:000000;border-style:solid;">
<code>12345678910111213141516171819202122232425262728299999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999</code> 
</pre>

I also changed it to overflow:auto so that scrollbars only appear when needed.