problema de maquetación Hola tengo una duda, tengo esta página
<html>
<head>
<title>Pagina</title>
<link href="estilo_duda.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="contenedor">
<div id="encabezado">
Encabezado
</div>
<div id="menu">
Menu con las opciones
</div>
<div id="principal">
Principal
Principal
Principal
</div>
<div id="publicidad">
Publicidad
</div>
<div id="piedepagina">
Pie de Pagina
</div>
</div>
</body>
</html>
con este css
.contenedor
{
width: auto;
height: auto;
margin: 0 auto;
}
#encabezado
{
font-family: Garamond,Arial;
font-size: 40px;
text-align: center;
padding-top: 25px;
color: white;
width: 987px; /* Ancho */
height: 100px; /* Alto */
background-color: #000000;
}
#menu
{
font-family: Arial;
font-size: 40px;
text-align: center;
background-color: #000000;
color: white;
width: 200px; /* Ancho */
height: 1720px; /* Alto */
float: left;
}
#principal
{
font-family: Arial;
font-size: 20px;
background-color: #000000;
width: 650px; /* Ancho */
height: 1720px; /* Alto */
color: #3FC665;
float: left;
padding-left: 10px;
}
#publicidad
{
font-family: Arial;
background-color: #000000;
width: 127px; /* Ancho */
height: 1720px; /* Alto */
text-align: center;
color: yellow;
float: left;
}
#piedepagina
{
font-family: Garamond;
font-size: 20px;
text-align: center;
vertical-align: middle;
color: orange;
width: 987px; /* Ancho */
height: 50px; /* Alto */
background-color: #000000;
padding-top: 25px;
clear:both;
}
en mi monitor de 14 pulgadas se ve bien pero en monitor de pantalla ancha se ve mal, porque aparece todo el contenido alineado a la derecha
http://tinypic.com/view.php?pic=30c297s&s=5
alguien sabe como solucionarlo?
