Esta es una forma de las tantas que existen para crear un diseño de varias columnas sin ningun inconveniente con CSS. Y nos referimos con "incoveniente" al hecho de que nuestras columnas muchas veces se sobrepone ó traspone al footer (pie de pagina). La solución se logra agrupando las columnas dentro de una capa principal la cual tiene la propiedad overflow con el valor auto y tiene especificado solo el ancho más no el alto (pues esto haría que se vean barras de desplazamiento).

Columnas con CSS

Para entender mejor el ejemplo veamos la propiedad overflow. Esta propiedad ayuda a que el contenido de cierta capa pueda ser visible ó no si pasa de las dimensiones establecidas (especialmente el alto). Su valores son:

  • overflow: visible Si el contenido de la capa excede sus dimensiones será mostrado igualmente.

  • overflow: hidden De ésta forma la capa se muestra correctamente, unicamente que el contenido que exceda de las dimensiones no será visualizado.

  • overflow: auto De ésta manera solo aparecerán las barras de scroll en caso de que el contenido exceda las medidas de la capa, posibilitando su lectura.

  • overflow: scroll Siempre aparecerán las barras de scroll. Si el contenido no excede las dimensiones quedan deshabilitadas, en el momento que es mayor el contenido se habilitan.

Ahora bien vamos al ejemplo:

<html>
	<head>
	</head>
	<body>
		<div style="width:1024px;overflow:auto;background-color:#00ff00;padding:15px;">

			This is your main surface which you can create as a "border DIV"

			<div style="width:30%;float:left;background-color:#0000ff;">

			This is your links or navigation

			</div>

			<div style="width:40%;float:left;background-color:#ff0000;">

			This is your content. Ipsum lorim, ipsume lorim...
			This is your content. Ipsum lorim, ipsume lorim...
			This is your content. Ipsum lorim, ipsume lorim...
			This is your content. Ipsum lorim, ipsume lorim...
			This is your content. Ipsum lorim, ipsume lorim...
			This is your content. Ipsum lorim, ipsume lorim...
			This is your content. Ipsum lorim, ipsume lorim...
			This is your content. Ipsum lorim, ipsume lorim...
			This is your content. Ipsum lorim, ipsume lorim...
			This is your content. Ipsum lorim, ipsume lorim...
			This is your content. Ipsum lorim, ipsume lorim...
			This is your content. Ipsum lorim, ipsume lorim...
			This is your content. Ipsum lorim, ipsume lorim...

			</div>
			<div style="width:30%;float:left;background-color:#0000ff;">

			This is your blog rol or something else like adds or something
			This is your blog rol or something else like adds or something
			This is your blog rol or something else like adds or something

			</div>
		</div>
	</body>
</html>

Probemos en nuestro el navegador el código y verá como queda.

Visto en Ra-Ajax | overflow propiedad