Como hacer columnas sin tablas

(English version available)

Dos columnas - algo común

Esta página muestra como usar la propriedad float de CSS para hacer páginas con dos o tres columnas, sin usar tablas (el elemento table del HTML, que se debe usar solo para datos tabulados)..

Le ayudaré primera que saber como hacer una regla CSS, y como usar el atributo class pero espero que la pagina es mas o menos bastante claro para intentar con copiar/collar...

Esta columna es todo en una capa - un elemento div - que tiene el atributo class="right".

la hoja de estilo para dos columnas tiene tres lineas::

 .main { float:right ; width:75%}
 .afterwords { clear: both }
 .nav { background-color: gold ; width: 25%}

el clase "main" aparece al derecho gracias a la propriadad float:right, que se aplica a todo que tiene un atributo class="right". Usa 75% del espacio disponible - en este ejemplo de la pagina gracias a la propriadad width:75%.

Algo al izquierda

(Si su navegador hace corectamente float, al menos. Si no, esta capa parece despues la primera.)

El div que contiene esta columna tiene el atributo class="nav"

Vemos de la hoja de estilo que tiene

Qué es la propriedad clear?

Quando hay dos columnas, normalmente lo que seguie va empezar lo mas alto que hay un espacio, y usar todo el espacio que hay. Quizas va aparecer como un partida de la columna la mas corta, o quizas voy aperecer con la forma de la caractera "L" tomando el espacio disponible cuando pasa baja un columna.

Esta div tiene class="afterwords", entonces la regla clear: both es aplicado. Que quiere decir "poner esto contenido solo quando no hay nada al derecho ni al izquierda". Se puede usar tambien clear:right o clear:left si solo quiere que el derecho o izquierdo de la pagina sea disponible.

What is happening here?

This is something that I recently got asked about - how to put three columns in an arbitrary order in the source, while being able to control the (horizontal) position in the common CSS rendering.

So this bit of stuff is the middle column, which explains what I'm trying to do. In the raw source, the order of these columns is "what is happening", "the stylesheet", then "applying it".

Note that with the 33% being applied, it is 33% of available space - to have equal sizes for all 3 columns, you would put 50% for those inside the double block, and 33% for those outside...

The Stylesheet

.colright { float : right ;
    width : 33% }
.colleft { float : right ;
    width : 33% }
.blockright { float : right ;
    width : 66% }
.blockleft { float : left ;
    width : 66% }

Applying it

There are two div elements - and one of those contains two div elements.

The first div needs to be floated (whether it is a single column or the double-column block), and the first div inside the double block needs to be floated. Which side you float each of these two determines the order acroos the page.

Note in this example I haven't set any margins - and having a div inside another div may lead to an extra top-margin.

(This is a footer, that uses the clear property so it should cover the full width, after any floated columns)

Por favor, enviad comentarios en español a la lista accesoweb@yahoogroups.com

Charles McCathieNevile $Date: 2002/02/15 17:16:00 $