Two column article with CSS

I would like to have a single in post in two columns automaticly (not with 2 divs) like in a newspaper article. Is there any way to achive this?

Answers


You can use CSS3 multi-columns, though support isn't very good

div {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-width: 20em;
-moz-column-width: 20em;
column-width: 20em;
/* IE10 & Opera 11.1 + support this property unprefixed */
}

Example: http://jsfiddle.net/eFznL/2/


You can, using CSS3. There is a new module called 'Multi-Column Layout' that serves specifically that purpose. Here is the link to the W3C recommendation.

You can use it now in Firefox, Safari, Chrome, Opera and Inernet Explorer 10. Take a look at this web page to check compatibilites for the CSS3 recommendations across several browser versions.

The text is supposed to flow from one column to the other and you won't need to use two different DIVs to fake two columns in your page design. You can apply the multiple columns in this way:

column-count: 2;
column-gap: 15px;
column-rule: 1px solid black;

-moz-column-count: 2;
-moz-column-gap: 15px;
-moz-column-rule: 1px solid black;

-webkit-column-count: 2;
-webkit-column-gap: 15px;
-webkit-column-rule: 1px solid black;

Each main rendering engine (like Mozilla's gecko and Chrome's webkit) has made its own property to support this, that's why you have to use the different prefixes -webkit and -moz.

Apart from that, you could also specify the width of the column (instead of the number of columns):

-moz-column-width: 300px;
-moz-column-gap: 15px;

-moz-column-width: 300px;
-moz-column-gap: 15px;

-webkit-column-width: 300px; 
-webkit-column-gap: 15px;

In any case, you probably want to use several DIVs because, sadly, Internet Explorer 9 and below don't support all this gorgeous multi-column magic.


Need Your Help

How to store and reproduce jQuery events

javascript json jquery

I am trying to store jQuery events in DB.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.