CODEWITHSUNDEEP
htmlcss
Michael
Michael

Reputation: 717

2-column auto-layout by CSS?

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.

Upvotes: 6

Views: 4421

Answers (5)

SimonDowdles
SimonDowdles

Reputation: 2046

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

Upvotes: 3

Quentin
Quentin

Reputation: 944005

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:

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

Upvotes: 3

Quentin
Quentin

Reputation: 944005

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.

Upvotes: 1

SimonDowdles
SimonDowdles

Reputation: 2046

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.

Upvotes: 2

Martin Clarke
Martin Clarke

Reputation: 5657

The Floatutorial website has good examples of best practice.

Upvotes: 0

Related Questions