Programmer - pre tag- text overflows the box

Programmer Question

I have applied the following style to the pre tag
[code]pre {
[color=blue]background-color[/color]:[color=orange] #FFFFCC[/color]
[color=blue]border[/color]:[color=orange] 2px dashed #FF6666[/color]
[color=blue]padding-top[/color]:[color=orange] 7px[/color]
[color=blue]padding-bottom[/color]:[color=orange] 8px[/color]
[color=blue]padding-left[/color]:[color=orange] 10px[/color]
[color=blue]float[/color]:[color=orange] none[/color]
[color=blue]padding-right[/color]:[color=orange] 10px[/color]
[color=blue]margin[/color]:[color=orange] 10px[/color]
}[/code]

The text overflows the box.
When I applied the float:right property the box behaved as expected but in large screens the rest floated around the box naturally. Not happy.
I am new to css and html - I am sure there is a simple solution. Please help.
:(

Find the answer here