37 - Posicionamiento absoluto (position: absolute)



Problema:

Disponer dos div con coordenadas absolutas, uno que represente la cabecera de la página (50 píxeles de alto) y otro la primer columna de la izquierda.

<!DOCTYPE html>
<html>
<head>
  <title>Problema</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="cabecera">
<p>Cabecera de la página</p>
</div>
<div id="columna1">
<p>Columna 1.</p>
<p>Columna 1.</p>
<p>Columna 1.</p>
<p>Columna 1.</p>
</div>
</body>
</html>
* {
  margin:0;
  padding:0;
}
#cabecera {
  background-color:#f99;
  font-family:verdana;
  font-size:1.3rem;
  position:absolute:
  top:0;
  left0;
  height:50px;
}
#columna1 {
  background-color:#ff0;
  font-size:1.3rem;
  position:absolute;
  left:0;
  top:51px;
  min-height:700px;
}
Ver solución


Retornar