2

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 ;-)).

Joseph Silber
  • 214,931
  • 59
  • 362
  • 292
  • I don't quite follow point #1. Do you mean the gutter between the edge of the `div` and the `iframe` border? – Jared Farrish Sep 30 '12 at 14:43
  • @JaredFarrish - Correct. There's some space between the left edge of the parent container and the left edge of the first column. Same goes for the last column, in reverse. – Joseph Silber Sep 30 '12 at 14:46
  • @JaredFarrish - The `ol`. Yes. – Joseph Silber Sep 30 '12 at 14:50
  • I see no space between the frame edge and the li edge, in firebug. If I squish the frame width down to make 500px, there is no extra space either. – KnowHowSolutions Sep 30 '12 at 14:50
  • @KnowHowSolutions - See [this screenshot](http://i.stack.imgur.com/cZPQE.png) for what I mean with the extra space. The `li` does line up flush with the parent, but since the `div` is centered within the `li`, it's not aligned with the edge of the `li`. – Joseph Silber Sep 30 '12 at 14:56
  • I see it; I just wanted to nail down what "parent element" was literally referring to. – Jared Farrish Sep 30 '12 at 14:58
  • Just wondering, why aren't you using a grid system? Are you DYI or do you see this as an exercise? (Which I think is an interesting exercise.) – Jared Farrish Sep 30 '12 at 15:00
  • @JaredFarrish - I'm not aware of any grid system that could do this. If I were, I'd study their code... – Joseph Silber Sep 30 '12 at 15:01
  • Which ones have you studied? I've got a list, we can compare notes. – Jared Farrish Sep 30 '12 at 15:03
  • That probably came off the wrong way. What I meant was, I've been building up a list but a lot of them I don't know much about their capabilities in reality. – Jared Farrish Sep 30 '12 at 15:15
  • @JaredFarrish - The regular suspects: [foundation](http://foundation.zurb.com/), [RGS](http://www.responsivegridsystem.com/), [Skeleton](http://www.getskeleton.com/), [Gridpak](http://gridpak.com/), [CSS Grid](http://cssgrid.net/) etc. These are all trying to solve the regular grid structure, which doesn't help me much. – Joseph Silber Sep 30 '12 at 15:21
  • I thought this one might fit: http://thecolumnist.info/ But it's not responsive. I saw one the other day, but I sometimes forget to bookmark all the ones I want to. – Jared Farrish Sep 30 '12 at 15:21
  • What is the layout philosophy you're working towards? You're not interested in the candy bar to tongue depressor effect, it sounds like. A collapsing box maybe? – Jared Farrish Sep 30 '12 at 15:25
  • This one starts off a little like your demo, but planks into a garage door close in: http://www.stacklayout.com/mockups/mockup1.html – Jared Farrish Sep 30 '12 at 15:27
  • @JaredFarrish - The Stack Layout's columns are not fixed width. – Joseph Silber Sep 30 '12 at 15:30
  • Oh ok. I see. Even up to 2k screen width? – Jared Farrish Sep 30 '12 at 15:33
  • Do you think embedding a fixed grid within a flex grid could work? – Jared Farrish Sep 30 '12 at 15:55
  • @JaredFarrish - Not sure what you're trying to say, but that sounds eerily similar to what I actually did. – Joseph Silber Sep 30 '12 at 16:02
  • Yes, except that I'm talking about trying it in some of the full-blown grids. The only thing is how to replicate the grouping at lower widths. – Jared Farrish Sep 30 '12 at 16:04
  • And when I first saw those `div`s, I was wondering what was going on, but I see what you're having to do to get the layout you want. – Jared Farrish Sep 30 '12 at 16:06
  • I don't know if I'm on to something here or not, but this is *almost* equilibrium: http://jsfiddle.net/userdude/gDws8/13/ – Jared Farrish Sep 30 '12 at 19:16

2 Answers2

2

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)

Community
  • 1
  • 1
Oleg
  • 24,465
  • 8
  • 61
  • 91
0

Ok my first thought would be to use media queries to gain a responsive approach for how many you want to show per row on differing screen sizes and my second would be to use

     box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;

this will stop the paddings you may put in later adding onto the box model size.

Hope this is close to what you are after.

Jamie Paterson
  • 426
  • 3
  • 10