Hola chicos les traigo un tutorial para maquetar el sitio web usando el float: left; A continuación les dejo la explicación paso por paso
1) Creamos una hoja de estilos con el nombre que queramos en mi caso como ejemplo usare el siguiente nombre estilos.css
2) Creamos un html con el nombre index.html y a dicho html le adjuntamos la hoja de estilos
3) Ahora haremos lo siguiente creamos un Id con el siguiente nombre wrap, Luego nos vamos a la solapa código y dentro del wrap crearemos el div header afuera del wrap creamos los otros 2 divs que son contenedor y botonera
Es importante seleccionar el cierre de la etiqueta del wrap y ponerlo al final del último div en este caso después del cierre del div contenedor.
El cierre de la etiqueta del contenedor lo pondremos debajo del </div> botonera para que contenga la botonera y lo que queramos contener.
Nos deberá quedar como el código que deje de ejemplo.
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Maquetación con float left</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
Colocar aquí el contenido para id "wrap"
<div id="header">Colocar aquí el contenido para id "header"</div>
<div class="contenedor">
Colocar aquí el contenido para class "contenedor"
<div class="botonera">Colocar aquí el contenido para class "botonera"</div>
</div>
</div>
</body>
</html>
4) CSS: Para que este método funcione debemos seguir los pasos del css que observamos abajo
Código:
@charset "utf-8";
/* CSS Document */
#wrap {
margin-right: auto;
margin-left: auto;
width: 586px;
background-color: #099;
}
#header {
float: left;
background-color: #0CC;
width: 586px;
}
.contenedor {
float: left;
margin-right: auto;
margin-left: auto;
background-color: #09F;
}
.botonera {
background-color: #0C6;
float: left;
width: 586px;
}
5) Vista previa del navegador
