Ditto produced box float issue

Hi All,

I really need a fresh set of eyes on this. I have this new site in development. The owner needs to add a continuous number of pages to a container page via Ditto. I have the system creating presentation boxes that include an image, then a title, and then a description within each box. The container page presents these boxes with a set width and will float them left, thus creating a series of rows with three boxes in a row. I have the CSS working.

The issue is that each title can have a short name or a long name. When the title is long it will kick down into a second row which changes the height of the box. As each box is floated the next box will position itself incorrectly which messes up the the whole page design big time!

What I have done temporally is to set a fixed height for these boxes (490 pixels) which gives the title breathing room when the title needs to drop down into a second row due to its length. This works. What this does though is create a big gap between the rows of boxes. Most box titles do not need the second row. I would like to not have this gap when needed but make the gap consistent when the title is longer? Does this make sense?

You can see the page (still a work in progress) here: http://www.knitquest.com/patterns.html

Thanks!

Max

you could wrap each row in a div and display table-cell on the boxes

I am not using tables or cells here. I have made a container div for all the boxes to go into. I am using a bunch of custom TVs to help the site owner add each page. Ditto just does a great job of aggregating all the pages. It all happens dynamically with floats.

I am beginning to think I need to declare a specific height to the boxes. Doing so is a compromise. Having a set height will accommodate longer title names or one size text increase from the viewer. That extra height makes the overall presentation suffer though...