How To Make Floating Divs The Height Of The Tallest Element For Each Row

I have a bunch of blocks of tables shown in picture. The block has the following css .block { float: left; width: 50%; } And they are all wrapped within a wrapper

Solution 1:

You may want to look at flexbox. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox can be used to stretch child elements based on the parent's size.

Here's a quick test I did in jsfiddle

https://jsfiddle.net/7Lknyxqr/

.wrapper{
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  height: auto;
  width: 100%;
}

.block{
  width: calc(50% - 20px);
  background-color: #343;
  margin: 10px;
}

Share