CLICK HERE TO ACCESS PLAYGROUND
CHALLENGE
To create a two-column div layout without any spaces using CSS is the challenge at hand.
STARTING LAYOUT
Each box is represented as:
<div class=A1">A1</div>https://i.sstatic.net/FlZ8k.jpg
DESIRED LAYOUT
https://i.sstatic.net/5XiFF.jpg
Seems simple, right?
However, there are specific conditions to follow:
- The heights of each div are variable.
- The number of divs is variable.
- The height of the left and right column should be as equal as possible, leaving minimal trailing white space.
- Modifying the HTML structure is allowed.
- The divs do not need to be displayed in order.
While JavaScript solutions are accepted, the true genius will be able to achieve this using pure CSS.
NOTE: The divs are generated using a .NET repeater, but this should not affect the solution.
UPDATE
Utilizing the flex model mentioned by Paran0a, progress has been made by calculating the height of .Wrap with a script. However, accurately determining half the width is challenging due to the possibility of a large last box.
var h = 0;
$('.Wrap > div').each(function() {
$(this).height(Math.random()*100);
h += $(this).height();
});
$('.Wrap').height((h/2));