0

I've got a list of elements that area positioned in a container in two columns or side by side. If all the elements have the same height, the elements float perfectly. Unfortunately, the same doesn't happen when the height is different for one or a few elements, a white gap appears, breaking it. A working example can be seen here ( http://jsbin.com/juluxibuda/edit?html,css,output ). I've fixed this in the past, don't remember exactly how (used JS to keep same height between all elements, etc) and I know about libraries like Masonry, but I'm wondering if there's a CSS only solution or what can be done here.

html:

  <div class="container">
    <div class="foo">foo</div>
    <div class="foo">foo</div>
    <div class="foo">foo</div>
    <div class="foo">foo</div>
    <div class="foo">foods ds dsds sd  sd<a href="#">as klasklas</a></div>
    <div class="foo">foo</div>
    <div class="foo">foo</div>
    <div class="foo">foo lkds kljds jkldas s</div>
    <div class="foo">fas asasoods ds dsds sd  sd<a href="#">as klasklas</a></div>
    <div class="foo">foo</div>
    <div class="foo">foo</div>
    <div class="foo">foo</div>
    <div class="foo">foo</div>
    <div class="foo">foods ds dsds sd  sd<a href="#">as klasklas</a></div>
    <div class="foo">foo</div>
    <div class="foo">foo</div>
    <div class="foo">foo lkds kljds jkldas s</div>
    <div class="foo">fas asasoods ds dsds sd  sd<a href="#">as klasklas</a></div>
  </div>

css:

.container {
  width: 100%;
}
.container .foo {
  float: left;
  width: 40%;
  margin-right: 5%;
  margin-bottom: 10px;
  background: yellow;
}
.container .foo a {
  display: block;
}

Screenshot available here

cimmanon
  • 67,211
  • 17
  • 165
  • 171
punkbit
  • 7,347
  • 10
  • 55
  • 89

1 Answers1

0

A solution I've found so far, which works for this particular case (but not all), is to place elements in rows (a container). The container element height will prevent the unwanted vertical gap.

.row {
    display: block;
    float: left;
    overflow: hidden;
    width: 100%;
    height: auto;
}
punkbit
  • 7,347
  • 10
  • 55
  • 89