title: pre tag- text overflows the box
body: <p>I have applied the following style to the <code>pre</code> element:</p>
  
  <p><pre><code>pre {
       background-color: #FFFFCC;
       border: 2px dashed #FF6666;
       padding-top: 7px;
       padding-bottom: 8px;
       padding-left: 10px;
       float: none;
       padding-right: 10px;
       margin: 10px;
      }</code></pre></p>
  
  <p>The text overflows the box.
  When I applied the <code>float:right</code> property the box behaved as expected but in large screens the rest floated around the box naturally. Not happy. EDIT2 : I made it (but for ie6), using float + clear. I have posted <a href="https://stackoverflow.com/questions/2358129/ie6-weird-h3-div-behavior-no-right-margin-bug-in-ff">another question on the new bugs</a></p>
  
  <p>I am new to CSS and HTML - I am sure there is a simple solution. Please help.
  :(</p>
  
  <p><strong>EDIT</strong> : closer to the mark :</p>
  
  <pre><code>pre {
       background-color: #FFFFCC;
       border: 2px dashed #FF6666;
       padding-top: 7px;
       padding-bottom: 8px;
       padding-left: 10px;
       padding-right: 10px;
       margin: 10px;
       white-space: pre-wrap;
      }</code></pre>
  
  <p>This one displays exactly as I want in ie6 - in ff 3.5 the text wraps - I know this is is the way it should be - but how can I carry the ie behavior to ff ?</p>
  
  <p>Images for the styled pre tag with <code>white-space: pre;</code></p>
  
  <p>ie6 : <a href="https://i1032.photobucket.com/albums/a406/dardanov/ie6pre.jpg" rel="nofollow noreferrer">https://i1032.photobucket.com/albums/a406/dardanov/ie6pre.jpg</a></p>
  
  <p><img src="https://i1032.photobucket.com/albums/a406/dardanov/ie6pre.jpg" /></p>
  
  <p>ff 3.5 : <a href="https://i1032.photobucket.com/albums/a406/dardanov/ff35pre.jpg" rel="nofollow noreferrer" title="Link to image of code rendered by Firefox."><a href="https://i1032.photobucket.com/albums/a406/dardanov/ff35pre.jpg" rel="nofollow noreferrer">https://i1032.photobucket.com/albums/a406/dardanov/ff35pre.jpg</a></a></p>
  
  <p><img src="https://i1032.photobucket.com/albums/a406/dardanov/ff35pre.jpg" /></p>
  
  <p>for <code>white-space: pre-wrap;</code> firefox wraps and ie stays the same. How can I get the ie behavior (autoexpanding of the code box) in ff ?</p>
  
  <p><strong>EDIT2</strong> : see answer below</p>