Hola a todos.
Lamentablemente css2 no incluye ningún mecanismo para la disposición en multi-columnas,
Afortunadamente css3 si:
Código HTML:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='es' lang='es'>
<head>
<meta http-equiv='Content-Type' content='text/xml; charset=UTF-8'/>
<title>tres columnas</title>
<style type='text/css'>
div { -moz-column-count: 3; -moz-column-gap: 1em; }
</style> </head>
<body>
<h1 lang='en'>Multi-columns in css3</h1>
<div> <q cite='http://www.w3.org/TR/css3-multicol/' lang='en'>
In the traditional CSS box model, the content of an element is flowed into the content box of the
corresponding element. Multi-column layout introduces a new type of container between the content
box and the content, namely the column box. Content is flowed into column boxes in the
block-progression-direction, and column boxes (or "columns", for short) are flowed into content boxes
in the inline-progression-direction. All columns of a content box have the same column width and column
length. It is not possible to set properties/values on column boxes. For example, the background of a
certain column box cannot be set and a column box has no concept of padding, margin or borders
although they may in the future). The column box becomes the containing block for the block children
(explicit or anonymous) of the element on which the columns are defined.
Between adjacent columns of the same element, there can be column gaps and column rules. Column gaps
similar to padding areas in the sense that they take up space. Column rules are visually similar to
borders, and they are described by the same values as borders. The column rule is placed in the middle
of the column gap. Different from borders, column rules do not take up space.
In paged media, the size of columns is constrained by the page area.
Floats that appear inside multi-column layouts are positioned with regard to the column box where the
float appears.
Content that extend outside the column box (e.g., long words and floats that are higher and/or wider
than the column box) is clipped. This only applies to content for which the column box is the containing
block (i.e., as if the column box had 'overflow:hidden').
Column boxes act as containing blocks for content in the columns. More specifically, column boxes act
like block-level, table cell, and inline-block boxes as per CSS 2.1, section 10.1, item 2 [CSS21].</q> </div>
</body> </html>