Div float with variable height

Question

I want to float div next to each other which is having variable height. I am using display inline-block to float div next to each other, How can I remove the extra space between each block ?

(How can i remove the highlighted yellow space below)

Below is my code

body {
  font-family: "Tahoma", Geneva, sans-serif;
  font-size: 15px;
}
.block,
.block li {
  display: block;
}
.block {
  width: 960px;
  margin: 10px;
  padding: 10px;
  background: rgba(0, 80, 140, 0.3);
}
.block li {
  display: inline-block;
  vertical-align: top;
  list-style: none;
  background: rgba(255, 0, 0, 0.4);
  width: 290px;
  margin: 0 10px 10px 0;
  padding: 5px;
}
.block li:nth-child(3n) {
  margin: 0 0 10px 0;
  background: rgba(0, 255, 0, 0.6);
}
.block li:nth-child(3n-1) {
  background: rgba(0, 0, 255, 0.5);
}

<ul class="block">
  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />Enough content for now.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />More content please.
    <br />And some more
    <br />Enough content for now.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />Enough content for now.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />More content.
    <br />Even more content.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />Enough content for now.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />More content.
    <br />Even more content.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />Enough content for now.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />More content.
    <br />Even more content.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />Enough content for now.
    <br />
  </li>
</ul>

I think is not possible all are same element same css effect .Better try with 3 different column or use with `table` tag — prasanth, Dec 31 '16 at 12:07
no there is no way to do that. only if you change elements position, of course if you make 3 vertical columns, for red, blue and green elements — , Dec 31 '16 at 12:12

score 0 · Answer 1 · answered Dec 31 '16 at 12:21

A jQuery hack using innerHeight(). Hope this helps.

var liElementHeights = [];
$(".block li").map(function(){
  liElementHeights.push($(this).innerHeight());
});
//console.log(liElementHeights);
var maxHeight = Math.max.apply(null, liElementHeights);
//console.log(maxHeight);
$(".block li").map(function(){
  $(this).innerHeight(maxHeight);
});

body {
  font-family: "Tahoma", Geneva, sans-serif;
  font-size: 15px;
}
.block,
.block li {
  display: block;
}
.block {
  width: 960px;
  margin: 10px;
  padding: 10px;
  background: rgba(0, 80, 140, 0.3);
}
.block li {
  display: inline-block;
  vertical-align: top;
  list-style: none;
  background: rgba(255, 0, 0, 0.4);
  width: 290px;
  margin: 0 10px 10px 0;
  padding: 5px;
}
.block li:nth-child(3n) {
  margin: 0 0 10px 0;
  background: rgba(0, 255, 0, 0.6);
}
.block li:nth-child(3n-1) {
  background: rgba(0, 0, 255, 0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="block">
  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />Enough content for now.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />More content please.
    <br />And some more
    <br />Enough content for now.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />Enough content for now.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />More content.
    <br />Even more content.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />Enough content for now.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />More content.
    <br />Even more content.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />Enough content for now.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />More content.
    <br />Even more content.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />Enough content for now.
    <br />
  </li>
</ul>

What do you mean by dynamic content? It'll work for server side rendering. — Jyothi Babu Araja, Dec 31 '16 at 12:25
@Shahil this is setting all the div to the same height. whereas my answer was not, and still you were saying that was the problem — ab29007, Dec 31 '16 at 12:34

Div float with variable height

1 Answers1