Question

I am trying to create a grid like system with div’s with content floated left. The problem is that the height of each div is not static since the content is different in each one. Since the height is different.. things get outta whack if one is taller then another in one row.

Is there some sort of css way or js (prefer javascript) way to get around this. I really want to avoid setting large heights on the divs to get them to line up.

You can see the example here: http://www.foreclosurejournalinc.com/index.php?option=com_hotproperty&view=type&id=1

Answer 1

First off – it is not correct to use a table in this situation: The table structure defines a relationship between data in the same row, and data in the same column. Since the second column is the same type of data as the first, there’s no table relationship here.

You shouldn’t use a table because you’re defining your layout in markup, so you can only ever have two columns. For example, if the client decides they want three columns, or you want to show a single-column list for a mobile view or print stylesheet, you need to change the markup (or even have several sets of markup for different purposes).

Flexible markup

OK – let’s look at your markup. At the moment, you have almost got a table structure, because you’re wrapping each row in a DIV. Again, this means you can’t ever have a single column or 3 or 4 columns side-by-side.

A more flexible solution is to markup your data as a list. Because it’s sorted, an ordered list is the right choice:

<ol id="list_properties">

  <li class="property">
    <h3 class="propertyTitle"><a href="#">08-CA-001731</a></h3>
    <dl class="details">
      <dt>Plantiff</dt>
      <dd>Bob's Mortgages</dd>
      <dt>Defendant</dt>
      <dd>Harry Skinflint</dd>
    </dl>
  </li>

  <li class="property">
    <h3 class="propertyTitle"><a href="#">08-CA-001731</a></h3>
    <dl class="details">
      <dt>Plantiff</dt>
      <dd>Bob's Mortgages</dd>
      <dt>Defendant</dt>
      <dd>Harry Skinflint</dd>
    </dl>
  </li>

</ol>

You’ll have one <li class="property"> per item in your ‘grid’. I’ve suggested some nicer markup for the details, too – help yourself to that if you like.

Now to finish it off: Sadly, this can’t be done in a cross browser fashion without a bit of final tweaking with Javascript. That said, the JS is unobtrusive, so it really only acts as a bit of polish at the end.

Base styling

Your base styles will look like:

#list_properties {
  list-style:none;
  margin:0;
  padding:0;
  width:960px;
  float:left;
}

#list_properties li.property{
  width:430px;
  float:left;
  margin:0 50px 50px 0;
  min-height:16em; /* For FF, Safari, Opera, IE8 */
  _height:16em; /* For IE6 */
  *height:16em; /* For IE7 */
}

That recreates the columns – at this stage, if all of the boxes had a height less than 16em, this would be all you need.

Javascript polish

To make sure everything is rock solid, I’d use the equal heights plugin for jQuery: http://www.cssnewbie.com/equalheights-jquery-plugin/ Basically, you pass it your container (#list_properties) and it scans each of the children (li.property), and sets the height of each one to the height of the tallest item.

So, for instance, one item has extra information and needs 18ems of height, all of the other items are set to 18em too.

The linked site has documentation for getting it going, but once you’ve got jquery and the plugin ready, you need only do:

$(function(){
  $('#list_properties').equalHeights();
});

Once you get it set up this way, you can modify the number of items in the column just by changing the width of the li.property.

A last thought…

I’m just thinking, what is the advantage of displaying this list in columns, anyway? After all, the user can sort the list – wouldn’t a single-column list be easier to scan? I’m assuming the user will be looking for a particular item, rather than just browsing through semi-randomly.