Overflow cutting up results (image attached)

Question

The section of "results" on the left is what's currently happening. The section on the right I what I want to happen to the results. When the group of results seem to big for the container the result at the bottom of the container show hide itself. I've been searching all over the web for CSS fixes, any help will be greatly appreciated.

Thank you.

Are the child elements a uniform height as you've drawn them? If so, and if you must use a particular container height, a mask at the bottom (or padding) could conceal partial child elements. Generally, CSS does not allow for this type of logic. That's where jQuery comes in handy. — isherwood, Jan 14 '13 at 18:50

score 1 · Accepted Answer · answered Jan 14 '13 at 19:00

1

You can use a trick including the use of columns which may not be fully supported.

http://jsfiddle.net/szGVu/

#holder{
  columns: 110px;
  -webkit-columns: 110px;
  -moz-columns: 110px;

  height: 300px;
  width: 110px;
  overflow: hidden;
}

.child{
  margin: 5px;
  height: 100px;
  width: 100px;
  display: inline-block;
}

answered Jan 14 '13 at 19:00

James Montagne

77,516
14
110
130

A good solution for any browser but IE < 10. http://stackoverflow.com/questions/5348061/how-to-display-css3-columns-on-ie – isherwood Jan 14 '13 at 19:11

Overflow cutting up results (image attached)

1 Answers1