Cómo crear columnas con CSS Float

No te asustes por la idea de renunciar a las tablas de diseño. columnas de diseño CSS se pueden crear de forma fiable con la propiedad float.

Instrucciones

Div utilizar para crear columnas

1 Hay varios pasos implicados en conseguir a las columnas que aparecen en la imagen introductoria al comienzo del artículo. La primera es crear un div recipiente que pueda contener todo en su diseño. Esto ayudará a mantener las cosas como encabezados y pies de página en línea con todo lo demás. He aquí un ejemplo regla CSS #container:

envase {

width: 700px;

}

La anchura no tiene que ser en píxeles. Puede ser en ems o porcentajes. Puede incluir el color de fondo, las fronteras, y muchas otras propiedades CSS en esta regla.

2 Dentro del div contenedor HTML, inserte un div para la columna de contenido y un div de la columna de la barra lateral.

Se mejora la accesibilidad a tener el contenido viene primero en el documento. Para hacer que parezca como la columna de la izquierda, el siguiente paso es establecer un ancho de la columna y la puso a flotar hacia el margen izquierdo (del contenedor).

contenido {

width: 65%;
float: left;

}

El ancho puede ser en píxeles, ems o porcentajes. Hacer que el contenido de dos tercios de la anchura del contenedor, dejando alrededor de un tercio de la anchura de la barra lateral.

3 Para colocar el div barra lateral, que le dan un ancho y un gran margen izquierdo.

{barra lateral

width: 30%;
margin-left: 70%;

}

Puede utilizar píxeles, ems o porcentajes para establecer el ancho. Elija una unidad que coincida con lo que elija para el envase y el contenido. En este ejemplo, la barra lateral se envuelve alrededor de la derecha del contenido, que se flotó izquierda. Dejar suficiente margen en el lado izquierdo de la barra lateral para dejar espacio para el div contenido.

Debido a que la barra lateral está limitado a un ancho de 30 por ciento y tiene un valor de margen izquierda amplia, la barra lateral no se envolverá en virtud de los contenidos flotaban, incluso si resulta que es la columna más larga.

Consejos y advertencias

• Si desea que el div contenido a la derecha, utilice float: right. Entonces adaptarse en consecuencia al margen derecho en la barra lateral div.
• Fronteras, imágenes de fondo o el color de fondo y muchas otras propiedades CSS se pueden utilizar para hacer cada columna visualmente distintos en su diseño de página.
• Si desea incluir un div pie de página en el interior del contenedor, asegúrese de usar la clara: tanto la regla para bajarla por debajo de la div de contenido flotado y colocarlo en la parte inferior del recipiente.