Saludos colegas...
Estoy comenzando a desarrollar paginas web utilizando CSS y se me ha presentado un problema, yo tengo enmarcado todo el contenido de mi pagina web en un DIV Contenedor el cual tiene 780 px de ancho, pero cuando inserto mucha informacion en el contenido del centro y visualizo en mi navegador el div de contenedor se desplaza unos pixeles mas de ancho, como puedo solucionar esto.
Gracias de antenamo
************************************************** *********
CODIGO PAGINA HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Registro</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
<div id="contenedor">
<div id="banner"></div>
<div id="contenido">
<div id="menu_izquierda">menu izquierda</div>
<div id="contenido_centro">aqui va el contenido del centro de la pagina...</div>
<div id="menu_derecha">menu derecha</div>
</div>
<div id="pie">Derechos resaervados a:</div>
</div>
<body>
</body>
</html>
************************************************** *********
COGIGO DEL CSS:
body {
background-color:#eee;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color: #000;
}
#contenedor {
border-left: 1px solid #000;
border-right: 1px solid #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
width:780px;
height:auto;
margin-left: auto;
margin-right: auto;
overflow:hidden;
}
#banner{
background-image:url(../imagenes/logotipo_banner.jpg);
background-repeat:no-repeat;
width:780px;
height:120px;
}
#menu_izquierda{
border-left: 1px solid #737373;
border-right: 1px solid #737373;
border-top: 1px solid #737373;
border-bottom: 1px solid #737373;
background-color: #f8f8fa;
float:left;
width:134px;
line-height:18px;
margin-top:2px;
margin-left:2px;
margin-bottom:2px;
}
#menu_derecha{
border-left: 1px solid #737373;
border-right: 1px solid #737373;
border-top: 1px solid #737373;
border-bottom: 1px solid #737373;
background-color: #f8f8fa;
float:right;
width:134px;
overflow:hidden;
text-align:left;
line-height:18px;
margin-top:2px;
margin-right:2px;
margin-bottom:2px;
}
#contenido_centro{
border-left: 1px solid #737373;
border-right: 1px solid #737373;
border-top: 1px solid #737373;
border-bottom: 1px solid #737373;
float:left;
width:480px;
height:auto;
margin-top:2px;
margin-left:5px;
}
#pie{
border-top: 1px solid #737373;
width:780px;
height:15px;
overflow:hidden;
margin-top:auto;
text-align:center;
color:#CCC;
line-height:15px;
vertical-align:middle;
background-color:#040D68;
}
************************************************** *********