Making cells wrap underneath one another regardless of height

[csdude55]

I have elements that I want to wrap and stack underneath one another. They all have the same width, but the height can vary. So let's say I have:

One . . . Two
Three .. Four

"One" might have a height of 75px, while "Two" might have a height of 50px. So I want "Three" to be directly underneath "One", and "Four" directly underneath "Two".

Here is my code:

// CSS
.left {
 float: left;
 width: 46%;
 height: 50px;
}

#one { height: 75px !important; }

// HTML
<div id="one" class="left">
 One<br>
 Foo
</div>

<div class="left">
 Two
</div>

<div class="left">
 Three
</div>

<div class="left">
 Four
</div>

The problem I'm having is that, since One has a greater height than Two, then Three is going underneath Two. Then Four is going underneath One, but justified to the bottom of Three so there's a big gap between One and Four.

Here's the Fiddle so you can see what I mean:

[jsfiddle.net...]

Any suggestions on how to make this look more natural?

I don't necessarily care if it's in the right order, I just need the elements to fall in line prettily without gaps between them.

[csdude55]

I never could find a CSS solution for this, so I had to make a server side solution. It's more complicated than I wanted, but it works:

// CSS
.left {
 float: left;
 width: 46%;
}

// PHP
echo <<<EOF
<div id="left">

EOF;

$arr = ['One<br>Foo', 'Two', 'Three', 'Four'];
$half = intval((count($arr) / 2) + 0.99);
$i = 0;

foreach ($arr as $key) {
 echo <<<EOF
 <div>
  $key
 </div>

EOF;

 $i++;

 if ($i == $half)
  echo <<<EOF
</div>

<div id="left">

EOF;
}

My real code actually uses an associative array and got way more complicated, but this should give the gist of what I did to future readers.

[coothead]

Hi there csdude55,

your problem can be resolved simply with CSS alone.

HTML

<div id="collection">
 <div>One<br>Foo</div>
 <div>Two</div>
 <div>Three</div>
 <div>Four</div> 
</div> 

CSS

body {
 background-color: #f9f9f9;
 font: normal 1em / 1.5em sans-serif;
 }
#collection {
 width: 92%;
 margin: auto;
 }
#collection > div {
 float: left;
 width: 50%;
 height: 3.25em;
 padding: 0.5em;
 border: 1px solid #000;
 box-sizing: border-box;
 background-color: #fff;
 box-shadow: inset 0 0 0.5em rgba( 0, 0, 0, 0.5 );
}
#collection > div:nth-of-type(1) { 
 height: 4.75em;
 border-bottom: 0;
}
#collection > div:nth-of-type(3) {
 clear: left;
}
#collection > div:nth-of-type(2),
#collection > div:nth-of-type(4) {
 border-left: 0;
}

Here's the codepen so you can see what I mean:...

[codepen.io ]

coothead

[lucy24]

Huh. To me this seems like a textbook case of display: table and/or display: table-cell. (No, you don't need an intervening "table-row".)

[csdude55]

Can you show me what you had in mind, @lucy24? I tried this:

[jsfiddle.net...]