To maintain the format of your data, consider using a table instead of the pre tag (you can even use a table inside a table).
Your issue could be resolved by using 'table-layout: fixed;', but since you are using pre and div elements within the table, you will need to make modifications for it to function properly. For now, I have removed the span and pre tags.
JSFiddle
CSS
body {
margin: 0%;
width: 100%;
}
table {
width: 100%;
overflow: auto;
table-layout: fixed;
margin: 0;
padding: 2px;
}
.middle {
display: block;
margin-left: auto;
margin-right: auto;
width: 1250px;
}
HTML
<div class="middle">
<table border=1>
<tbody>
<tr>
<td valign="top">
<span id="pktDetails">
<li class="main1" onclick="pktclick(this)" state="0">Frame 169: 759 bytes on wire (6072 bits), 759 bytes captured (6072 bits)</li>
<ul class="a" style="display:none">
<li class="leaf">Encapsulation type: Ethernet (1)</li>
<li class="leaf">Arrival Time: Oct 11, 2011 06:51:36.170112000 CDT</li>
<li class="leaf">Epoch Time: 1318333896.170112000 seconds</li>
<li class="leaf">Frame Number: 169</li>
<li class="leaf">Frame Length: 759 bytes (6072 bits)</li>
<li class="leaf">Capture Length: 759 bytes (6072 bits)</li>
</ul>
<!-- More list items here -->
</span>
</td>
<!-- More table cells here -->
</tr>
</tbody>
</table>
</div>