2-column auto-layout by CSS?

Question

Given a

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing...
</div>

is it possible with CSS to generate a 2 or 3-column layout automatically, say by specifying the height of the container? If not, what are best practices in such a case?

Thanks for your help.

Answer 1

This question belongs at Doctype. Please read the faq.

Answer 2

The Floatutorial website has good examples of best practice.

Answer 3

See if this is any use..

Answer 4

You most certainly could not turn the above into a 2 or 3 column layout, however if you had a container and 3 divs, creating a 3 column layout would be as simple as this:

<div class="container">

  <div class="col1">Column1</div>
  <div class="col2">Column2</div>
  <div class="col3">Column3</div>

</div>

And the CSS:

.container{overflow:hidden; padding:20px; border:1px solid #ccc;}
.col1, .col2, .col3{width:200px;float:left;clear:none;margin:0 10px 0 10px;}

This would create a VERY basic 3 column layout with each column having 10px of margin on each side. The container div has 20px padding and a subtle border.

Hope this points you in the right direction.

Answer 5

For this type of thing I would look at using a grid system such as 960 or YUI

Both include ways to divide subsections into columns.

Answer 6

Given comments on my previous answer, it seems that I may have misunderstood what you were looking for.

If you want text to automatically flow from one column to another then your options are:

• CSS 3 Multi-columns (poorly supported)
• JavaScript (interesting reflow issues)

Personally, I would avoid it. In general, content that flows from one column to the next is quite screen-media-unfriendly.

Answer 7

You can always take the jQuery approach, look at this article: http://www.mainelydesign.com/blog/view/auto-columns-columnizer-my-new-favorite-jquery-plugin