html - List Items of Different Heights Beneath Each Other -

i have list of items displayed in 3 columns. items of various heights causing problems alignments, forcing larges gaps. them display tight each other vertically. can see talking @ site matthew grenier consulting. "bright beginnings" item directly beneath "yes coffee" item , same in first column. ideas how can css? have played around couple hours without luck. thanks.

simply use display: inline-block; vertical-align: top; instead of float: left;.

div.appico ul.sp-portfolio-items > li {     background: transparent none repeat scroll 0% 0%;     padding: 0px;     margin: 0px;     /* float: left;           remove this! */     display: inline-block; /* use     */     vertical-align: top;   /* ,     */ } 

also, remove float: left; div.appico .sp-portfolio-item, or replace well.

this visual result:

if want fourth box closer first one, suggest restructure part of page boxes beneath eachother (using 3 columns) instead of right of eachother, or set fixed height.