Floating Divs Left, Make All Divs Height Equal the Tallest Div in It's Row

How to make floating divs the height of the tallest element for each row

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;
}

HTML/CSS: Making two floating divs the same height

You can get equal height columns in CSS by applying bottom padding of a large amount, bottom negative margin of the same amount and surrounding the columns with a div that has overflow hidden. Vertically centering the text is a little trickier but this should help you on the way.

#container {

  overflow: hidden;

      width: 100%;

}

#left-col {

  float: left;

  width: 50%;

  background-color: orange;

  padding-bottom: 500em;

  margin-bottom: -500em;

}

#right-col {

  float: left;

  width: 50%;

  margin-right: -1px; /* Thank you IE */

  border-left: 1px solid black;

  background-color: red;

  padding-bottom: 500em;

  margin-bottom: -500em;

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head></head>

<body>

  <div id="container">

    <div id="left-col">

      <p>Test content</p>

      <p>longer</p>

    </div>

    <div id="right-col">

      <p>Test content</p>

    </div>

  </div>

</body>

How might I force a floating DIV to match the height of another floating DIV?

Wrap them in a containing div with the background color applied to it, and have a clearing div after the 'columns'.

<div style="background-color: yellow;">
  <div style="float: left;width: 65%;">column a</div>
  <div style="float: right;width: 35%;">column b</div>
  <div style="clear: both;"></div>
</div>

Updated to address some comments and my own thoughts:

This method works because its essentially a simplification of your problem, in this somewhat 'oldskool' method I put two columns in followed by an empty clearing element, the job of the clearing element is to tell the parent (with the background) this is where floating behaviour ends, this allows the parent to essentially render 0 pixels of height at the position of the clear, which will be whatever the highest priorly floating element is.

The reason for this is to ensure the parent element is as tall as the tallest column, the background is then set on the parent to give the appearance that both columns have the same height.

It should be noted that this technique is 'oldskool' because the better choice is to trigger this height calculation behaviour with something like clearfix or by simply having overflow: hidden on the parent element.

Whilst this works in this limited scenario, if you wish for each column to look visually different, or have a gap between them, then setting a background on the parent element won't work, there is however a trick to get this effect.

The trick is to add bottom padding to all columns, to the max amount of size you expect that could be the difference between the shortest and tallest column, if you can't work this out then pick a large figure, you then need to add a negative bottom margin of the same number.

You'll need overflow hidden on the parent object, but the result will be that each column will request to render this additional height suggested by the margin, but not actually request layout of that size (because the negative margin counters the calculation).

This will render the parent at the size of the tallest column, whilst allowing all the columns to render at their height + the size of bottom padding used, if this height is larger than the parent then the rest will simply clip off.

<div style="overflow: hidden;">
  <div style="background: blue;float: left;width: 65%;padding-bottom: 500px;margin-bottom: -500px;">column a<br />column a</div>
  <div style="background: red;float: right;width: 35%;padding-bottom: 500px;margin-bottom: -500px;">column b</div>
</div>

You can see an example of this technique on the bowers and wilkins website (see the four horizontal spotlight images the bottom of the page).

How to adjust the height of a series of DIVs by CSS

You could put the divs in containers. If you need a div of equal height, the containers will always be the height of the tallest. This does add a bit more complexity to it, but it avoids JS, which I think might be ultimately what you want. If not I can delete this answer.

http://jsfiddle.net/zjScK/1/

HTML

<div class="row">
    <div class="container3">
        <div class="container2">
            <div class="container1">
                <div class="box">
                    line<br />line<br />line
                </div>
                <div class="box">
                    line<br /><br /><br />line<br />line<br />line<br /><br /><br />line<br />line<br />
                </div>
                <div class="box">
                    line<br /><br /><br />line<br />line<br />
                </div>
            </div>
        </div>
    </div>
</div>

Stylesheet

body
{
    margin:0;
}

.container3 {
    clear:left;
    float:left;
    width:100%;
    position:relative;
    right:70%;
    background-color:red; /* column 3 background color */
}
.container2 {
    clear:left;
    float:left;
    width:100%;
    position:relative;
    right:10%;
    background-color:lime; /* column 2 background color */
}
.container1 {
    float:left;
    width:100%;
    position:relative;
    right:10%;
    background-color:yellow; /* column 1 background color */
}

.box {
    float:left;
    width:10%;
    position:relative;
    left:90%;
    overflow:hidden;
    background-color:blue;
}

There is also a reference to this here: http://matthewjamestaylor.com/blog/equal-height-columns-5-column.htm

And another post that has a similar question: Floating divs left, make all divs height equal the tallest div in it's row?

Hopefully this helps!

How do I keep two side-by-side div elements the same height?

Flexbox

With flexbox it's a single declaration:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

setting the height of each three divs to the hight of the last one/ the longest one

Use flexbox:

<div class="parent">
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
</div>

.parent {
    display: flex;
}

When there are multiple divs in a row, how to avoid getting the next row line up at the bottom of the highest div?

after googling "pintrest" layout I found a solution:
CSS:

        body{
            -webkit-column-count: 3;
            -webkit-column-fill:auto;
            text-align: center;
        }
        div{
            -webkit-column-break-inside: avoid;
            vertical-align: top;
            display:inline-block;
            border-style:solid;
            width:100%;
        }
        .a{
            background-color: lightcoral;
            height:200px;
        }
        .b{
            background-color: lightseagreen;
            height:500px;
        }

https://jsfiddle.net/pn3dz9fg/3/
thx!

CSS - make all elements the same height as the tallest element

Just add display:flex to your container class like this:

.container {
    width: 320px;
    display:flex;
}

jsFiddle: https://jsfiddle.net/AndrewL32/xpdxyaz6/2/

NOTE:

As of May 2021, the Flex property compatibility for browsers are as follows:

Google Chrome Partial support with prefix v4 - v20 | Full support with prefix v21 - v28 | Full support v29+

Mozilla Firefox Partial support with prefix v2 - v21 | Partial support v22 - v27 | Full Support v28+

Internet Explorer Partial support with prefix v10 | Partial support with prefix v11+

Safari Partial support with prefix v3.1 - v6 | Full support with prefix v6.1 - v8 | Full Support v9+

Edge Full support v12+