Make floating div containers stay in place as divs above them expand and overlap over them using max-height

Make floating div containers stay in place as divs above them expand and
overlap over them using max-height

I have many rows of three div containers stacked atop each other (like a
grid) using float left, each with a hidden overflow using a max-height
limit to truncate the contents inside. In order to expand the divs I use
:hover on the class to change the max-height to 999px, revealing the
contents while the mouse is hovering, however when the hovered div expands
the divs below it get smashed down, shift to the right, or drop down below
the lowest point of the hovered div, making the divs chaotic and terrible
looking.
How can I have the hovered div expand to reveal the contents without it
effecting the divs below?
.clips {
width: 294px;
max-height: 150px;
padding: 2px;
background-color: #EBEBEB;
overflow: hidden;
border: 1px solid #666;
display: block;
margin: 0;
}
.clips:hover {
max-height: 999px;
}