CODEWITHSUNDEEP
css
Fuego DeBassi
Fuego DeBassi

Reputation: 3017

Dynamic columns/rows

Wondering--does anyone know of any good articles explaining the CSS technique allowing multiple instances of a class to flow down the page relative to the items above it. Not explaining it that well.

Veerle' Pierter's does it on this page: http://veerle.duoh.com/belgiangraphicdesign Although I'm not sure I want to use a technique like her's that requires entering of the height per element via her EE installation.

I made a little graphic of what I am trying to acheive; enter image description here

The key is I need a robust technique for doing it. Something where the markup could 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>
...

Would love any pointers in the right direction.

Upvotes: 4

Views: 2988

Answers (3)

jackocnr
jackocnr

Reputation: 17416

As the others have pointed out, using only CSS you could group the boxes into columns. Unfortunately this will not look good if your content is dynamic and you don't know the heights of all the boxes (your columns could end up drastically different lengths). If you want to calculate the heights of boxes in order to arrange them nicely, you are going to have to use Javascript. There's certainly nothing wrong with using Javascript - it's the right tool for this job!

As for the implementation, the logic would go something like this: start by adding the first 4 boxes, one at the top of each column. Then keep track of the total height of each column using Javascript's clientHeight property, and for each new box you want to add; simply append it to the end of the shortest column with appendChild().

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

Upvotes: 2

ANeves
ANeves

Reputation: 6365

She achieves it positioning the boxes absolutely.

But you can achieve it with very simple css, assuming you can control the order by which the items appear.
You have to group them in columns (and not in rows as is usual), but it works like a charm.

Use HTML like this:

<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 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 for the columns, because IE7 does not accept display: inline-block; for elements that are naturally block elements. (Meh.)

Upvotes: 0

Bill H
Bill H

Reputation: 2069

She isn't setting a height for those boxes.

Jquery is dynamically positioning each box and as far as I know that's the only way to achieve that effect with the markup you describe in your post.

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

<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>

Upvotes: 1

Related Questions