Hide Block Which Does Not Fit Container Height

I have example here http://jsfiddle.net/brain2xml/cVAMN/

1

2

Solution 1:

By Using CSS you can achieve.

Demo

.sep{
    border:1px solid red;
    height: 50px;
    width: 280px;
    margin: 10px;
}
#container{
    min-height: 170px;
    width: 300px;
    border:1px solid green;
    padding:10px;
}

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}

Solution 2:

If you dont want to use Script you can only change the height of the span divs to height: 73px; and set overflow : hidden for #container

Share