0

This one is probably a cinch for someone who knows CSS better than I do.

I am trying to create a CSS layout that has a number of elements I'd like to arrange like tiles. Each tile will be the same width (though different height), so will naturally arrange themselves into columns, as shown in here:

http://jsfiddle.net/SVzWh/

I'd like to know how to make every element in the same row be the same height. I do not know what that height will be, as the content of the tiles is (somewhat) dynamic. Ideally, the tiles would flow as shown in the fiddle so that there would be more columns on a wider screen, fewer on a narrower one. There could potentially be dozens of tiles.

Here is the code shown in the fiddle:

A spot of HTML:

<ul>
  <li class="e">Element 1</li>
  <li class="e">Element 2 Taller item</li>
  <li class="e">Element 3</li>
  <li class="e">Element 4</li>
  <li class="e">Element 5</li>
  <li class="e">Element 6</li>
  <li class="e">Element 7</li>
  <li class="e">Element 8</li>
</ul>

And a wee bit of CSS:

.e {
  display: inline-block;
  border: 1px solid black;
  margin: 5px;
  padding: 3px;
  width: 120px;
}
Watusimoto
  • 1,773
  • 1
  • 23
  • 38
  • I used jQuery to iterate over the LI elements to find the tallest one then applied that height to all LIs. http://jsfiddle.net/YvPwU/ Would that work? – shaunsantacruz Nov 13 '12 at 16:48
  • I would prefer a CSS solution because, well, it seems like the sort of thing CSS was designed to do. However, a script would be acceptable as a second choice. – Watusimoto Nov 13 '12 at 17:18
  • If you prefer CSS, check out the answer from this question: http://stackoverflow.com/questions/2114757/css-equal-height-columns - I believe that's what you're after. – shaunsantacruz Nov 13 '12 at 17:30

3 Answers3

1

Look into JQuery masonry, it's a JQuery plugin that does what you are looking for.

bookcasey
  • 39,223
  • 13
  • 77
  • 94
  • I've looked at this, and I could find no facility for aligning things into rows and making the elements the same height. My items will be uniform enough that a "real masonry" layout will just look sloppy. – Watusimoto Nov 13 '12 at 15:42
0

Thinking about your problem, I thought that jQuery would certainly be the way to go. I did a little bit of searching, and found the following:

http://css-tricks.com/equal-height-blocks-in-rows/

From a cursory look, it does seem like it will help you achieve your goal.

CM Kanode
  • 1,436
  • 1
  • 11
  • 14
  • I'll need to take a look at this. I was hoping for a simple CSS answer, but I'm already pretty JS heavy, so one more script won't make things much worse. – Watusimoto Nov 13 '12 at 17:04
0

I ended up using a slightly modified version of this JS script:

https://www.assembla.com/code/raysafedemo/subversion/nodes/WebSite/Scripts/jQuery.equalHeights.js?rev=107

written by Scott Jehl, Todd Parker, and Maggie Costello Wachs

Watusimoto
  • 1,773
  • 1
  • 23
  • 38