Floating divs left, make all divs height equal the tallest div in it's row?

Question

I am attempting a design that would float a series of divs, all the same class, to the left. I want the divs to fit into rows, where in each row the divs are the same height so that there is no breakage between the rows and the design elements line up. Is there a way to make this happen, or do I essentially have to preset each div's height?

I'm floating to the left because I want the rows to be shorter if the browsers width is skinnier.

I think that's confusing. Attached is an image of what I'm trying to do.

Answer 1

There are three options as I see it:

State the height in your div style

Looks like the simplest answer, and since all divs (in the image) look to be the exact same height, this doesn't appear to be a problem to me:

div.class {
    height: 300px;
}

Create row containers

Create a container for each row of divs and define its height, then give each child div a height of 100%:

div.row-container { height: 300px; }
div.class         { height: 100%; }

Use a table

Don't be afraid to use the table element to display data in a tabular fashion. I am not sure how well your div semantically could be replaced with table rows and columns. But give it some thought as a potential candidate.

---

EDIT: I originally misunderstood, thinking you wanted to emulate the image exactly. My solutions are ones which assume a constant height (something you expressed a desire to possibly avoid). A counter-argument to that stance is that visually, rows which are all the same height are pleasing to the eye, and ultimately you want some control over how heigh your columns can be.

However it is possible to do exactly what you want, using no JS:

http://matthewjamestaylor.com/blog/equal-height-columns-5-column.htm

Answer 2

The answer is different depending on how you intend to implement it. If you're sticking with css 2, then the solution is either javascript (force all 'columns' to be the same height with javascript) or any of the multitude of methods for faking a column layout in css2. Here http://www.search-this.com/2007/02/26/how-to-make-equal-columns-in-css/ for example.

there is a css3 draft proposal to support multi column layouts. This is currently supported by most non-ie browsers (at least the most up to date versions). But youd be brave to put into a production environment if you value you're accessibility / dont have a fallback. See here http://www.w3.org/TR/css3-multicol/ for details.

Answer 3

I guess I would not go for a table layout solution, since tables are not meant for layout purposes. There are quit some nice javascript solutions for the equal column problem (eg the columnizer jquery plugin), but looking at your example image I think I would come up with something like the following (assuming the dimensions of the elements are fixed):

html:

        <div class="Container">     
        <div class="RowContainer">
            <div class="Cell"><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></div>
            <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
            <div class="Cell"><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></div>
            <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
        </div>
        <div class="RowContainer">
            <div class="Cell"><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></div>
            <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
            <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
            <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
        </div>      
    </div>

CSS:

    .Container {
        width:800px;
        position:relative;
        margin:0 auto;
    }
    .RowContainer {
        overflow:hidden;
        position:relative;
        height:200px;
        clear:both;
    }
    .RowContainer .Cell {
        position:relative;
        float:left;
        height:100%;
        width:200px;
        background-color:#ff0;
    }

Answer 4

Have just recently found a good way to take this: As i have expericed, having elements in float style so they behave properly on a responsive enviroment isn't easy, more like hellish. If you want that every element on the same "row" have the same height, the best aproach for IE9 and above is flexbox.

Sample, we have 4 boxes that doesnt fit on the container, so we want them to move to a new row if they dont fit but keep all the same height (Being the height value unknown):

<div class="container">
  <div class="element">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
  </div>
  <div class="element">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
  </div>
  <div class="element">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
    <p>
      Lorem ipsum dolor sit amet.
    </p>
  </div>
  <div class="element">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
  </div>
</div>

Aplying this styles just fixes it:

.container {
  display: flex;
  display: -mx-flexbox;
  display: -webkit-flex;
  flex-grow: 0;
  -ms-flex-grow: 0;
  -webkit-flex-grow: 0;
  flex-wrap: wrap;

  width: 400px; /* Sample constraint */
  background-color: red; /*Visiblity */
}

.element {
  flex: none;
  width: 120px; /* Sample constraint */
  border: 1px solid blue; /*Visiblity */
}

Check this fiddle, it will give all you want. https://jsfiddle.net/upamget0/

Source: CSS height 100% in automatic brother div not working in Chrome

Great info can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 5

I've been using this solution by Chris Coyier of CSS-tricks. Quick & easy, works like a charm.

      // IIFE
      (function() {

      var currentTallest = 0,
          currentRowStart = 0,
          rowDivs = new Array();

      function setConformingHeight(el, newHeight) {
        // set the height to something new, but remember the original height in case things change
        el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
        el.height(newHeight);
      }

      function getOriginalHeight(el) {
        // if the height has changed, send the originalHeight
        return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
      }

      function columnConform() {

        // find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
        $('#page-wrap > div.yourelement').each(function() {

          // "caching"
          var $el = $(this);

          var topPosition = $el.position().top;

          if (currentRowStart != topPosition) {

            // we just came to a new row.  Set all the heights on the completed row
            for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);

            // set the variables for the new row
            rowDivs.length = 0; // empty the array
            currentRowStart = topPosition;
            currentTallest = getOriginalHeight($el);
            rowDivs.push($el);

          } else {

            // another div on the current row.  Add it to the list and check if it's taller
            rowDivs.push($el);
            currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest);

          }


        });

        // do the last row
        for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
          setConformingHeight(rowDivs[currentDiv], currentTallest);
        }

      }

      // If the content might change... probably debounce this and run it.
      // $(window).resize(function() {
      //  columnConform();
      // });

      // DOM Ready
      // You might also want to wait until window.onload if images are the things that are unequalizing the blocks
      $(function() {
        columnConform();
      });

    })();

Source: https://css-tricks.com/equal-height-blocks-in-rows/