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>
Código:
5) Vista previa del navegador@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;
}
