Dynamic columns / rows

Question

Surprisingly, does anyone know any good articles explaining the CSS technique that allows multiple instances of a class to flow across a page relative to the elements above it. Without explaining it so well.

Veerle 'Pierter does this on this page: http://veerle.duoh.com/belgiangraphicdesign Although I'm not sure I want to use a technique like this, it requires inputting the height of the element through its EE setting.

I made a small illustration of what I am trying to achieve;

The key is I need a reliable method to do this. Something where the markup might be as simple as:

<div class="box"> Number 1 </div> <div class="box"> Number 2 </div> <div class="box"> Number 3 </div> <div class="box"> Number 4 </div> <div class="box"> Number 5 </div> ... 

Loves any pointers in the right direction.

Answer 1

As others have pointed out, using only CSS, you can group the boxes into columns. Unfortunately, this will not look good if your content is dynamic and you do not know the heights of all the boxes (your columns can have completely different lengths). If you want to calculate the height of the boxes in order to conveniently arrange them, you will have to use Javascript. Of course, it makes no sense to use Javascript - this is the right tool for this job!

As for the implementation, the logic will look something like this: start by adding the first four boxes located at the top of each column. Then track the total height of each column using the Javascript clientHeight property, and for each new field that you want to add; just add it to the end of the shortest column using appendChild ().

If you decide to go with jQuery, I can recommend a plugin called jQuery Masonry .

Answer 2

She does not set the height for these fields.

Jquery dynamically positions each cell, and as far as I know, this is the only way to achieve this effect with the markup that you describe in your post.

If you don't want to use a javascript solution, the only way to do this is to have wrapper columns, but that will greatly change your markup.

 <div class="container"> <div class="box">number 1</div> <div class="box">number 2</div> <div class="box">number 3</div> </div> <div class="container"> <div class="box">number 4</div> <div class="box">number 5</div> <div class="box">number 6</div> </div> <div class="container"> <div class="box">number 7</div> <div class="box">number 8</div> <div class="box">number 9</div> </div> 

Answer 3

She achieves that he positions the boxes absolutely.

But you can achieve this with very simple css, assuming you can control the order in which the elements appear.
You should group them in columns (and not in rows, as usual), but this works like a charm.

Use HTML as follows:

 <span class="column"> <div class="box">number 1<br />with two lines</div> <div class="box">number 4</div> <div class="box">number 7<br />with two lines</div> </span> <span class="column"> <div class="box">number 2</div> <div class="box">number 5<br />with two lines<br />or even three<br />or four!</div> <div class="box">number 8</div> </span> <span class="column"> <div class="box">number 3</div> <div class="box">number 6</div> <div class="box">number 9</div> </span> 

And CSS is like this:

 .column { clear: left; width: 25%; display: inline-block; vertical-align: top; } .box { border: solid 1px blue; } 

Test it on JSFiddle.net .
Use span columns for columns because IE7 does not accept display: inline-block; for elements that are natural block elements. (Fur.)