Hola aeb_asturias
Es una cuestión de forma de interpretación.
Cuando a un bloque le asignas un valor a la propiedad width se lo estás asignando a su contenido. Si además le asignas un padding, un border y/o un margin lo agregará a la parte externa del contenido.
Es decir, si creas un contenedor de width: 200px y le aplicas además un padding de 10px esos 10px los pondrá alrededor del área de contenidos que yá mide 200px de ancho, con lo que ocupará una anchura total de 220px (los 200 del contenido más 10px por cada extremo horizontal).
En el código que estás usando sucede....
<div style="margin:10px; margin-top:5px; ">
No le asignas una anchura, con lo que tomará por defecto el ancho total de su contenedor. Si su contendor es body, pues toma el ancho de body
<div class='alt2' style='margin:0px; padding:6px; border:1px inset; width:100%; height:200px; overflow:auto'>
Le asignas un width del 100%, así que toma el 100% del contenedor que lo contiene, que yá ocupa el 100%.
Padding: 6px le agrega a ese 100% 6px más por cada lado, lo que suman 12px sobre el 100% de la anchura de body
border: 1px le agrega otro pixel a cada lado, que sumado a los 12 de padding dan 14px.
Esos 14px son los que provocan que salga la barra de desplazamiento horizontal.
Internet Explorer en cambio no lo hace así, si no que cuando le asignas 200px a un contendor, siempre su anchura total será de 200, independientemente del padding etc que le asignes. En IE las dimensiones del padding, border y margin son restadas del espacio del contenido.
Jo, no sé yo si he logrado explicarme....
Puedes leer info detallada aquí
http://www.sidar.org/recur/desdi/tra...width-property
y aquí
http://www.sidar.org/recur/desdi/tra...box-dimensions