Question

I’m trying to create some evenly spaced columns (an ol), with the columns themselves being fixed width.

So far, I’ve managed to achieve the desired effect by using table layout, and nesting an additional element inside the list item.

HTML:

<ol>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
</ol>​

CSS:

ol {
    display: table;
    width: 100%;
}

li {
    display: table-cell;
}

div {
    margin: 0 auto;
    width: 100px;
    height: 250px;
}

This works great, but has the following 2 shortcomings:

1. As you can see in the demo, the first & last columns don’t line up flush with the parent’s outer edges.
2. This can’t really be used responsively. The only thing you can do at smaller widths is stack them, but I’d like to split them (2 or 3 per row).

---

Is what I’m after even possible in CSS alone? I know there are a plethora of ways to accomplish this in JS, but I’m after a CSS-only solution.

---

P.S. I don’t care about IE7-, but I do need to support IE8. CSS3 selectors are OK though, since I’m anyhow using selectivizr in the project (I know that’s JS ;-)).

Answer 1

It seems appropriate for you to recycle “how to *really* justify a horizontal menu”. Basically the behaviour you’re describing is that of inline-block elements of identical width having text-align:justify applied:

ol {
  /*force the desired behaviour*/
  text-align: justify;
  /*remove the minimum gap between columns caused by whitespace*/
  font-size: 0;
}

li {
  /*make text-align property applicable*/
  display: inline;
}

/*force "justify" alignment that requires text to be at least over 2 lines*/
ol:after {
  content: "";
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

div {
  display: inline-block;
  width: 100px;
  height: 250px;
}

Working fiddle.

NB: you may have to re-apply desired font-size and text-align to descendants of ol depending on the reset you’re using (i.e. to prevent these properties from being inherited)