How to distribute column widths efficiently based on child element widths?

Question

I was given a design for creating in HTML / CSS, which, I think, may not be possible, but I want to be absolutely sure before I lose and compromise.

Several elements containing variable-length text are grouped in groups of two such that they form columns, where the columns are precisely distributed over the available width, but each column is not wider than its widest point. Thus, it uses horizontal space as efficiently as possible, while keeping the elements perfectly aligned like a grid. Consider this example -

[-a--] [-cccccc-] [-eee-] [-g---] [-bb-] [-dddd---] [-ff--] [-hhh-] 

It may look tabular, but keep in mind that the elements should also be wrapped when the container is compressed and the columns retain their magical alignment -

 [-a---] [-cccccc-] [-bb--] [-dddd---] [-eee-] [-g------] [-ff--] [-hhh----] 

I cannot decide how to solve the recursive width dependency. That is, the width of each “column” is determined by the longest element in that column, but the total available width is known and must be the exact sum of the width of the columns.

I enjoy using only the CSS3 solution, returning to the fixed element width solution for older browsers, but I'm completely fixated on what CSS properties can achieve this magic.

Just to provide some kind of starting point, here is Codepen using CSS3 columns: http://codepen.io/anon/pen/kiGgp

This is useless since the columns are evenly distributed, and I wonder if there is a way to distribute them optimally.

Answer 1

I was not able to achieve what you specified, even after numerous attempts using the FlexBox model. (BTW: this model is currently poorly supported by browsers)

But in my efforts I came with a worthy solution, perhaps you will like it too.

Demo in this script

I managed to evenly distribute the space between the elements in each row , allowing the transfer of elements. each element gets the exact amount of space that it needs, and the rest are separated as spaces inside the line .

but this width remains even when flowing around the elements. therefore, you don’t have a Column As display.

it is pure CSS and cross browser. Tested: IE10, IE9, IE8, Chrome, FF

HTML

 <div class="wrap"> <div class="pair"> <p>a</p> <p>b</p> </div> <div class="pair"> <p>cccccccc</p> <p>dddddd</p> </div> <div class="pair"> <p>ee</p> <p>f</p> </div> <div class="pair"> <p>ggggggggggg</p> <p>hhhhhhhhh</p> </div> <div class="pair"> <p>iiii</p> <p>jjjjjj</p> </div> <div class="filler"></div> </div> 

CSS

 * { padding: 0; margin: 0; } .wrap { background-color: #ccc; line-height: 0; text-align: justify; } .pair { line-height: normal; background-color: #ddd; display: inline-block; width: auto; } .filler { width: 100%; height: 0; font-size: 0; display: inline-block; vertical-align: top; }