Codifique el problema visto anteriormente para mostrar dos columnas, cabecera y pie de página. Luego asigne a la propiedad width, de la regla contenedor, el valor:
width:780px; margin: 0 auto;
¿Cuál es el resultado?
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<meta charset="UTF-8">
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<h1>Aca el título de la página</h1>
</div>
<div id="columna1">
<p>columna1. columna1. columna1. columna1. columna1.
columna1. columna1. columna1. columna1. columna1.
columna1. columna1. columna1. columna1. columna1.
columna1. columna1. columna1. columna1. columna1.
columna1. columna1.</p>
</div>
<div id="columna2">
<h2>Título de la columna</h2>
<p>Contenido de la columna2. Contenido de la
columna2. Contenido de la columna2. Contenido
de la columna2. Contenido de la columna2. Contenido
de la columna2. Contenido de la columna2. Contenido
de la columna2. Contenido de la columna2. Contenido
de la columna2. Contenido de la columna2. Contenido
de la columna2. Contenido de la columna2. Contenido
de la columna2. Contenido de la columna2. Contenido
de la columna2. Contenido de la columna2. Contenido
de la columna2. Contenido de la columna2. Contenido
de la columna2. Contenido de la columna2. Contenido
de la columna2. Contenido de la columna2. Contenido
de la columna2. Contenido de la columna2. Contenido
de la columna2. Contenido de la columna2. Contenido
de la columna2. Contenido de la columna2. Contenido
de la columna2. Contenido de la columna2. Contenido
de la columna2. Contenido de la columna2. Contenido
de la columna2. Contenido de la columna2. Contenido
de la columna2. Contenido de la columna2. Contenido
de la columna2. Contenido de la columna2. Contenido
de la columna2. Contenido de la columna2. Contenido
de la columna2. Contenido de la columna2. Contenido
de la columna2.</p>
</div>
<div id="pie">
Pié de página.
</div>
</div>
</body>
</html>
* {
margin:0;
padding:0;
}
#contenedor
{
width:760px;
margin:0 auto;
border:1px solid #000;
line-height:130%;
background-color:#f2f2f2;
}
#cabecera
{
padding:10px;
color:#fff;
background-color:#becdfe;
clear:left;
}
#columna1
{
float:left;
width:200px;
margin:0;
padding:1rem;
}
#columna2
{
margin-left:210px;
border-left:1px solid #aaa;
padding:1rem;
}
#pie {
padding:10px;
color:#fff;
background-color:#becdfe;
clear:left;
}