css3 multi-columns can be used on elements not only text!

<p> <h2>multiple columns layout:</h2>multi-columns properties mostly are used with elements rendering text content in order to render the text in a way similar to newspapers..we all know this.i thought about making some use of these properties to produce a layout-mode since the concept suggests so for text content.the results was a bit interesting!. <p>below is a multi-columns box that has block-level elements inside it.the box width and height is at it's default value:</p> </p> <section class="box-1"> <div class="first"></div> <div class="second"></div> <div class="third"></div> <div class="first"></div> <div class="second"></div> <div class="third"></div> <div class="first"></div> <div class="second"></div> </section> <p class="box-1-dsc"> above we have: <ul> <li><code>width</code> and <code>height</code> are at their defaults (unset).</li> <li><code>columns:8 auto;</code></li> <li><code>column-gap:0px;</code></li> <li>rendered boxes <code>display</code> is at default which is block.(inline and inline-block do not work with this layout-mode)</li> </ul> in order to adjust the space between the colored boxes i ndeed to change the multiple-columns box width (changing the width property value or simply change the browser width) because <code>column-gap</code> has no effect here. notice the flexibility of the small boxes when changing the multi-columns box width to smaller values.hence it is always good to have the containing multi-columns box <code>width</code> value set to it's max value so that the space between the boxes will not emerge again. <p>notice that <code>column-count</code> value is the same as the number of the rendered elements inside the multi-columns box.this number should always be equal to the number of the rendered elements or it's division number withe zero remainder.otherwise the results will be very unexpected.for example: <p>if we have 8 boxes rendered then i would use:<pre> <code>column-count:8;</code>-boxes rendered in one row (8 / 8 = 1) <code>column-count: 4;</code>-boxes rendered in two rows (8 / 4 = 2) <code>column-coumt:2;</code>-boxes rendered in three rows (8 / 2 = 3) <code>column-count:1</code>-boxes rendered in eight rows. (8 / 1 = 8) </pre> so the result is a division by zero remainder number.the same is with odd number of boxes </p> </p> </p> <h3>Specifying height for the multi-columns box:</h3> <p><code>height</code> value should be high enough to contain the boxes.otherwise the results are unexpected:</p> <div class="height-example"> <section class="box-2"> <div class="first"></div> <div class="second"></div> <div class="third"></div> <div class="first"></div> <div class="second"></div> <div class="third"></div> <div class="first"></div> <div class="second"></div> </section> </div> <p><code>height</code> value for the multi-columns containing box above is 70px only</p> <p><h3>using <code>column-width</code>:</h3> <p></p>using <code>column-width</code> is no different than <code>column-count</code> because <code>column-width</code> tells the browser: hi..give me one column every 200px for example.the same is happening with <code>column-count</code> "give me 2 columns in this multi-columns box.</p> <section class="box-3"> <div class="first"></div> <div class="second"></div> </section> <p><h3>Empty boxes example using multiple columns concept with block elements:</h3></p> <section class="empty-boxes"> <div class="b"></div> <div class="b"></div> <div class="b"></div> <div class="b"></div> <div class="b"></div> <div class="b"></div> </section>