CSS Ya

Problema:

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>
<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:0px;
  padding:0px;
}
#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:1em;
}
#columna2
{
  margin-left:210px;
  border-left:1px solid #aaa;
  padding:1em;
}
#pie {
  padding:10px;
  color:#fff;
  background-color:#becdfe;
  clear:left;
}

45 - Disposición de 2 columnas, cabecera y pie.

Retornar