No dejes de estudiar o repasar 10 min. por día esta web

Acomodar el Div en el diseño web.

Escribe Javier R. Cinacchi en
https://www.estudiargratis.com.ar/webmaster/div-acomodar.html
Revisión: 24-06-2015
Ten en cuenta que ya se trataron los siguientes temas: Qué es DIV - tablas con div. En esta lección se va a acomodar un Div. Una página web actual está llena de "div", que forman su estructura. Tienes que comprender el siguiente código y con este se contestará a preguntas sobre cómo se hace:
<div style="background-image: url(https://www.estudiargratis.com.ar/imagen/fondo123.jpeg);
min-width: 305px;
max-width: 380px;
font-size : large;
margin: 0 auto;
text-align : center;"> Cont DIV </div>

Al comprender el siguiente código te vas a poder responder lo siguiente, guardá esta página en tus favoritos

¿Cómo colocar la imagen de fondo a un Div?
<div style="background-image: url(https://www.estudiargratis.com.ar/imagen/fondo123.jpeg);"> Cont DIV </div>
Va como se muestra, lo que se cambia es la dirección web

¿Cómo colocar un color de fondo a un Div?
<div style="background: #CCCCFF; "> Cont DIV </div>

¿Cómo especificar un ancho máximo y mínimo un Div para que se adapte al diseño?
<div style="min-width: 305px; max-width: 600px"> Cont DIV </div>


¿Cómo indicar el tamaño de la letra al Div?
Ya se vio aquí: Los formatos en CSS más usados de textos, tres ejemplos de cómo hacerlo.
<div style="font-size : large;"> Cont DIV </div>
<div style="font-size: 125%;"> Cont DIV </div>
<div style="font-size: 11pt;"> Cont DIV </div>
Para mí lo más práctico es indicar en porcentaje.


¿Cómo se centra un Div?
<div style="margin: 0 auto; width: 300px;"> Cont DIV </div>
margin: 0 auto indica que se tome como margen inicial superior y de costado a la cordenada 0, y a su vez se está indicando la propiedad auto de la distancia de márgenes, entonces si por ejemplo se especifica un ancho determinado con width, lo que hará el navegador es dividir el resto que sobra entre los márgenes derecho e izquierdo, entonces el div quedará centrado.

¿Cómo se centra un texto dentro del Div?
<div style="text-align : center;"> Cont DIV </div>

¿Cómo se pone un margen externo?
<div style="margin: 10px;"> Cont DIV </div>

¿Cómo se alínea un Div a la derecha o izquierda?
<div style="float : left; width: 250px;">izquierda Cont DIV </div>
<div style="float : right; width: 250px;">derecha Cont DIV </div>