What is the use of column layout in CSS?

Question

I have an image called social-share-icon.gif.This image containing facebook,twitter and google+ icon.

In Css i need to use all icon as seperate.I don't have any idea how to use this.

Some one please help with example code.

Answer 1

With just a few CSS rules, you can create a print-inspired layout that has the flexibility of the web. It’s like taking a newspaper, but as the paper gets smaller, the columns will adjust and balance automatically allowing the content to flow naturally.

.intro {
-webkit-columns: 300px 2;
-moz-columns: 300px 2;
columns: 300px 2;
}

The columns property will accept column-count, column-width, or both properties.

columns: || ;

Answer 2

With just a few CSS rules, you can create a print-inspired layout that has the flexibility of the web. It’s like taking a newspaper, but as the paper gets smaller, the columns will adjust and balance automatically allowing the content to flow naturally.

For more information :https://css-tricks.com/almanac/properties/c/columns/

Answer 3

This layout consists of a header, a horizontal navigation bar, a main content column, a sidebar, and a footer. It is also horizontally centered in the browser window. A pretty basic layout, and not at all difficult to create with CSS once you know how to deal with the inevitable Internet Explorer bugs.

For more details and example: http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/