Tecnología

Inicio

Cómo hacer columnas de una caja Div

September 17

Usted no tiene que crear tablas para un diseño de dos columnas. Se pueden crear con las hojas de estilo en cascada (CSS). Aquí es cómo crear un cuadro div 800 píxeles de ancho con dos columnas iguales que se centra en la pantalla del navegador.

Instrucciones

1 Abrir Bloc de notas o un editor HTML y escriba lo siguiente en un nuevo documento en blanco:

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Html>
<Head>

2 A continuación, escriba lo siguiente:

<Style type = "text / css">
<! -

envase {

margin: 0 auto; /

Esto centra el DIV contenedor en la página /
Anchura: 800px;
}

columna izquierda {

flotador izquierdo;
margin: 0;
anchura: 50%;
}

columna derecha {

flotar derecho;
margin: 0;
anchura: 50%;
display: inline;
}
// ->
</ Style>

3 Cerrar la sección <head> con la siguiente etiqueta: </ head>

4 Terminar la codificación de su diseño de dos columnas con la siguiente:
<Body>
<Div id = "contenedor">

&lt;div id="leftcolumn">Put left column content here&lt;/div>
&lt;div id="rightcolumn">Put right column content here&lt;/div>

</ Div>
</ Body>
</ Html>

Consejos y advertencias

  • Asegúrese de añadir el tipo de documento como la primera línea de su código. Tipo de documento es el nombre abreviado para la Definición de Tipo de Documento (DTD), que indica a los navegadores, buscadores y otras herramientas de análisis de la página de la versión de (X) HTML que está utilizando. Esto también establece un modo de análisis estándar y elimina las conjeturas para el navegador u otra herramienta de análisis de su page.To mantener su código compatible con los nuevos estándares Web, utilice minúsculas para todas sus HTML tags.Adjust los estilos en cascada en el <head > sección para poner crear un fondo para la página, configurar el tamaño de fuente y estilo, poner espacio alrededor de las columnas, la caída de una imagen de fondo en o hacer otros ajustes estéticos.
  • Asegúrese de utilizar la correcta definición de tipo de documento para su archivo HTML o no se mostrará correctamente en el navegador. Hay muchos tipos de documentos HTML, con el ser más común: HTML 4.01 Strict, HTML 4.01 y XHTML 1.0 Transicional Strict.To crear un espacio alrededor de las columnas, es necesario reducir el ancho de cada columna. Por ejemplo, si quieres un margen izquierdo y derecho de 10 píxeles para cada columna, establecer el ancho de cada una de las columnas a 380 px. A continuación, establezca los márgenes izquierdo y derecho a 10 px en sus estilos en cascada. De lo contrario, la columna de la derecha aparecerá más abajo en la página de la izquierda.