specifying a css div container so that elements exceeding its height continue in its next 'column'

Question

Hi,

How do I specify a css div container so that it enforces column-like behavior, such that when the height of the container is exceeded by the elements in its first 'column', the elements simply continue in the next 'column' of the container. My goal is not to specify columns but just the i) the container height and ii) whatever properties the elements need to have to fill up the 'columns'.

Thanks,

Lille

Answer 1

In the same way that you specify any div, you can give it either a class or an id.

As regards your intent to use the div to enforce 'column-like' behaviour, you're limited to either a limited implementation of CSS columns:

#div_id {
  column-width: 10em; /* not well-implemented yet. */
  -moz-column-width: 10em;
  -webkit-column-width: 10em;
  column-gap: 1em;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  column-count: 3;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-rule: 1px solid #000;
  -moz-column-rule: 1px solid #000;
  -webkit-column-rule: 1px solid #000;
}

If you specify -vendor-column-count: 3 and omit the -vendor-column-width the browser will implement 3 columns with the width automatically calculated by the rendering engine, conversely if you specify the -vendor-column-width: 10em without specifying the -vendor-column-count the browser will calculate the appropriate number of columns to display.

Clearly these CSS3 properties are implemented by only Chrome/Safari (-webkit) and Firefox (-moz).

For cross-browser support you would need to use a JavaScript solution (or use a server-side technology): A List Apart has an article that references a JS implementation.