CODEWITHSUNDEEP
htmlcss
Watusimoto
Watusimoto

Reputation: 1888

Tiled layout in HTML/CSS

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

Upvotes: 0

Views: 3243

Answers (3)

Watusimoto
Watusimoto

Reputation: 1888

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

Upvotes: 0

CM Kanode
CM Kanode

Reputation: 1436

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.

Upvotes: 0

bookcasey
bookcasey

Reputation: 40473

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

Upvotes: 1

Related Questions