Question

I have several uniform blue elements (<div style="display: inline-block;">) inside a red div inside a purple div. Mockup (imgur).

I would like the blue elements to be left-aligned (as many in a row as will fit in the purple div width), with a red div shrink-wrapped around them. But then I would like the red div be horizontally centered inside the purple div.

I was hoping to do something like this (jsFiddle), but that only works if the red div has a specified width.

Answer 1

Returning to this problem, I have found a solution with inline CSS and no javascript (which were additional constraints I didn’t mention).

If it’s stupid and it works, it’s not stupid! At least that’s what I’m telling myself.

My solution is padding the end of the list of child elements with several “invisible” equal-width 0-height inline-block elements. I ended up not needing the “red div” to accomplish this result.

Here is my solution: http://jsfiddle.net/3wVTx/8/