Put content below the shorter column

Question

I have a "dashboard" type layout in which I have two columns of differing heights. I have a third item that I would like to add to whichever is the shortest column (see attached screenshot).

In the first example, column 1 is shorter, so we add item 3 below that, but if column 2 is shorter it should be there.

I thought I should use floats, however it doesn't run right.

Can someone please enlighten me?

Answer 1

You can float the three items left, right and left:

#wrapper {
  box-shadow: 0 0 0 1px #CCC;
}
/* clearfix */
#wrapper::after {
  content: "";
  display: block;
  clear: both;
}
.item {
  width: calc(50% - 1em);
  margin: .5em;
}
/* floats */
#item-1 {
  float: left;
  background-color: #080;
}
#item-2 {
  float: right;
  background-color: #F00;
}
#item-3 {
  float: left;
  background-color: #FF0;
}
/* demo */
textarea {
  box-sizing: border-box;
  margin: 1em;
  width: calc(100% - 2em);
  resize: vertical;
}

<p>Resize the boxes by dragging the resize handle of the textarea<br> The yellow box will position itself below the shorter of green and red box</p>
<div id="wrapper">
  <div class="item" id="item-1"><textarea rows="4">1</textarea></div>
  <div class="item" id="item-2"><textarea rows="9">2</textarea></div>
  <div class="item" id="item-3"><textarea rows="4">3</textarea></div>
</div>

Answer 2

I don't think it is possible via a pure CSS solution. First the DOM must be render (the 2 boxes and their contents are rendered) and thus you have the exact height of each box. Then you need to calculate (Javascript ? ) which is the shortest and then append the 3rd box to that column.

So from all the above, i think that you need a combination of JS and CSS