How do I slide a lower row's divs under the hanging div of the upper row?

[StevenHu]

I have a dynamic JS script that populates a bunch of divs with catalog information: image, title below image, text link below title. The images are all 150px square, but the title may be 1-3 lines in length. This means varying heights of divs, and they wrap. However, the divs are always 170px width.

Here’s the problem: when a div is extra tall in the middle of a row, then the next row starts to the right of that div, then the rest flows naturally, leaving an unsightly gap at the left.

How do you fix that? Eyeball the longest div and set a fixed height?

Here’s the relevant JS code I’m using:

output.innerHTML+="<div class='segment'><div class='segmentimg'><img class='pic' src='../images/parts/" + numb + "_sm.jpg' width='150px'>" + "</div>" +
   "<p>#" + numb + " " + named + " <a href='/parts/details/" + numb + "/'>Online</a></p></div>";

And the relevant CSS:

 .segment {
    display:table-cell; 
    border-radius:8px; 
    background-color:#eee;
    border:#878787 solid 1px; 
    padding:.5em; 
    margin:.5em;
    -webkit-appearance:none;
    overflow: auto;
    width: 170px;
    float: left;
 }
 .segmentimg {
     float: left;
     overflow: auto;
     clear: right;
 }
 img.pic {
     width:150px;
     float: left;
     }

[Erik_J]

I see you display them as table-cells, if they aren’t divided by table-row parents they will be in one row and expand or overflow the table that contains them (or the “virtual” table element the browser creates for them to display correctly).

Table-cells can not be floated.

You could try display them as inline-table or inline-block instead of floating them. Then you can also align them vertically.
E.g.:

       /* float: left; */
        display: inline-block;
        vertical-align: bottom;

[StevenHu]

That works! Much appreciated!