CSS only: how to make a div the width of its biggest row, with children as inline-blocks?

Question

Problem:

I want to center the containing div, but I want to also left-align the blocks. I think flex boxes might be the solution, but I'm not sure what to do with them. I want to do this:

without Javascript
without tables
without setting a row width (the row width must be dynamic.. that's the intent of this exercise)
without setting a width to the container. (same as setting a row width)
without adding invisible divs. (same as setting a row width)

Example, with current CSS (attempt failed):

.block {
 border  : 5px solid DarkRed;
 width   : 150px;
 height  : 150px;
 display : inline-block;
}
.container {
 display    : inline-block;
 text-align : center;
}

http://jsfiddle.net/SKRjG/

Edit: here is a Javascript version to show how it should look like: http://jsfiddle.net/SKRjG/8/

Flexbox cannot do this (see: http://stackoverflow.com/questions/18218668/even-flexbox-product-grid-with-left-alignment) — cimmanon, Oct 08 '13 at 12:47
No it isn't. The desired visual appearance might differ slightly, but the same limitations apply. Flexbox is just as effective as text-align in this instance. — cimmanon, Oct 08 '13 at 19:21
Which limitations?... "Flexbox is just as effective as text-align in this instance." : ??? — Agamemnus, Oct 08 '13 at 23:23

score 1 · Accepted Answer · answered Oct 08 '13 at 07:58

Put your divs within another container so that it looks like

<div class="container">
  <div class="subcontainer">
    <div class="Block"></div>ETC
  </div>
</div>

Then have @media queries to change the width of .subcontainer to fit your blocks into perfect grids. Then center your .subcontainer div with margin: 0 auto;

Css might look like:

.block {
 border  : 5px solid DarkRed;
 width   : 150px;
 height  : 150px;
 display : inline-block;
}
.subcontainer {
    text-align:left;
    margin:0 auto;
}
/*Three columns*/
 @media (min-width: 495px){
.subcontainer{width:495px;}
 }
/*Four columns*/
 @media (min-width: 660px){
.subcontainer{width:660px;}
 }
/*Five*/
@media (min-width: 825px){
.subcontainer{width:825px;}
 }

Fiddle: http://jsfiddle.net/TM2wB/26/

I suppose that is *technically* correct, but would prefer not having to specify media queries for each column size. — Agamemnus, Oct 08 '13 at 08:14

score 0 · Answer 2 · answered Oct 08 '13 at 07:32

0

Use this CSS

.block {
 border  : 5px solid DarkRed;
 width   : 150px;
 height  : 150px;
 display : inline-block;
 float:left;
 clear:both;
}
.container {
 display    : inline-block;
 text-align :center;
 margin:0 auto;
}

answered Oct 08 '13 at 07:32

Vivek Kumar

1,204
4
15
35

That doesn't work too well. It works less when the implied space nodes are removed: http://jsfiddle.net/SKRjG/7/ – Agamemnus Oct 08 '13 at 08:12
Don't you want to use fix width of container? – Vivek Kumar Oct 08 '13 at 09:54
Huh? Check the fiddle. Also, look at this: http://jsfiddle.net/SKRjG/8/ This is a Javascript solution. – Agamemnus Oct 08 '13 at 19:11

CSS only: how to make a div the width of its biggest row, with children as inline-blocks?

2 Answers2