Auto arrange blocks to multi column layout using CSS3

Multi column layouts and Pinterest style layouts are very popular now. Multi column layouts can show more
information in a limited space and use the web page efficiently. Viewers can easily view all content blocks
without scrolling or dragging the page. CSS3 has introduced special keyword, column-count, which is really
helpful for building a multi column layout. Let's do it.



The CSS required for creating this layout is given below. The code is self-explanatory.

<style type="text/css">

#container {
    
    -webkit-column-count: 5;  /* For webkit browsers like Safari and Chrome */
    -moz-column-count: 5;     /* For Linux or Mac specific browsers and for Mozilla Firefox*/
    column-count: 5; /*You can give any number as column count*/
}
#container li {
    display: inline-block; /*do not delete*/
 height: 150px; /*your fixed height*/
}
</style>

Here is the sample list element code. CSS3 column-count style will be applied to container element and it will be converted to a stunning multi column list.

<ul id="container">
    <li>
        HTMLexplorer.com
        <br />
        <i>Explores the web contents, helpful to developers, designers and publishers.</i>
    </li>
    <li>
        HTMLexplorer.com
        <br />
        <i>Ideal for developing websites with innovative ideas.</i>
    </li>
    <li>
        HTMLexplorer.com
        <br />
        <i>Helpful and simple articles are easily understandable to everyone.</i>
    </li>
    <li>
        HTMLexplorer.com
        <br />
        <i>Explores the web contents, helpful to developers, designers and publishers.</i>
    </li>
    <li>
        HTMLexplorer.com
        <br />
        <i>Ideal for developing websites with innovative ideas.</i>
    </li>
    <li>
        HTMLexplorer.com
        <br />
        <i>Helpful and simple articles are easily understandable to everyone.</i>
    </li>
    <li>
        HTMLexplorer.com
        <br />
        <i>Ideal for developing websites with innovative ideas.</i>
    </li>
    <li>
        HTMLexplorer.com
        <br />
        <i>Helpful and simple articles are easily understandable to everyone.</i>
    </li>
</ul>