In the past, when we wanted to create columns we used a table. Today, CSS3 has a style called column that can do the trick easily. Unfortunately that is not working with Internet Explorer, but in that case, we can use the Columnizer jQuery Plugin. In this post, we will concentrate on the CSS3 rules, while we might talk about Columnizer in the near future.
Multiple columns
To create a rule for columns we use the following style:
.threecol
{
-moz-column-count: 3; /* Firefox */
-webkit-column-count: 3; /* Safari and Chrome */
column-count: 3;
}
An the result will be:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo, felis at vulputate tincidunt, turpis nisl egestas felis, sit amet auctor velit massa quis libero. Fusce tincidunt neque ut mi tincidunt sollicitudin. Mauris sed scelerisque tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin quis ligula quis velit luctus ullamcorper sed ut est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed egestas urna ac libero sagittis lobortis. Donec sapien nunc, porta at pharetra imperdiet, ornare eget eros. Fusce placerat nisi et libero faucibus ac condimentum nisl lacinia. Donec ut enim non dui tristique tristique sit amet a nunc. Nullam placerat felis a dolor aliquam auctor. Nulla pellentesque sem eu ligula aliquam ut blandit ipsum rhoncus. Integer tincidunt posuere nisi vehicula vulputate. Aenean non metus sit amet leo varius euismod in quis tellus. Pellentesque ut tempus metus.