Como Posicionar Divs en una hoja html Parte 1

Vamos a ver como podemos posicionar Divs en una pagina HTML usando una hoja de estilos css

Creamos una página básica:

como vemos en la parte link dentro de la estructura head le indicamos que tenemos una hoja de estilos llamada index_estilos.css

La página se llama index.html

Creamos dentro del body un contenedor div llamado principal que contendrá al resto del diseño. y cambiamos en la hoja de estilos ciertos estilos.

Ahora nos preocupamos de la hoja de estilos y creamos primero unos estilos de reseteo usando el asterisco para que no aparezcan datos por omisión.

Y luego estilos del div principal.

margin auto hace que se centre el div y le damos un tamaño así como un fondo naranja.

El resultado de ver la hoja es:

Un recuadro naranja centrado en el navegador y pegado a la parte superior.

Para que no pegue usaremos un margin top debajo de margin con unos 60px para que se separe de la barra del navegador.

Ahora creamos los demás contenedores que van a quedar dentro del principal. La idea es hacer un diseño como el siguiente.

como vemos hay tres divs dentro del principal que le hemos puesto colores.

comenzamos añadiendo el lateral rojo dentro del div principal

Ahora cambiamos el estilo para que se posicione en la parte derecha del div principal.

Nota: El color naranja no se ve. En el diseño es solo como ayuda para entenderlo.

Como vemos la orden float hace que el div vaya a la derecha y lo demás lo conocemos

Como vemos el div rojo queda en la parte derecha del div principal

Aquí acaba esta primera entrega.