Aquí dejo un boceto de como se divide una página en secciones, cada una la he dejado de un color para distinguirlas mejor.
En el fichero html.
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>Titulo</title>
</head>
<body>
<div id="page">
<div id="top"></div>
<div id="leftContent"></div>
<div id="centerContent"></div>
<div id="rightContent"></div>
<div id="foot"></div>
</div>
</body>
</html>
En el fichero CSS.
#page{
width: 800px;
height: 550px;
}
#top{
width: 800px;
height: 100px;
background-color: blue;
}
#leftContent{
width: 200px;
height: 350px;
background-color: yellow;
float:left;
}
#centerContent{
width: 400px;
height: 350px;
background-color: green;
float:left;
}
#rightContent{
width: 200px;
height: 350px;
background-color: red;
float:left;
}
#foot{
width: 800px;
height: 100px;
background-color: blue;
float: left;
}
Y el resultado en el navegador.
1 comentarios:
Muy buen articulo para los que se estan iniciando en este mundillo, estaría bien preparar un articulo de CSS básico. Saludos
Publicar un comentario