Question

I’m not an expert in CSS. Could someone please help whether it’s possible to create a columns like below using pure CSS?

Answer 1

When the descriptions are considered, this becomes a much harder problem. The bars are relatively easy, and can be built with somewhat semantic markup (although this could probably be improved):

<ul class="graph">

  <li class="height10">
    <h1>Category 1</h1>
    <div>
      <h2>Subtitle</h2>
      <p>More text</p>
    </div>
  </li>

  <li class="height9">
    <h1>Category 2</h1>
    <div>
      <h2>Subtitle</h2>
      <p>More text</p>
    </div>
  </li>

</ul>

And the styles,

.height10 { height: 300px; }
.height9 { height: 270px }
/** add more through height1 **/

h1, h2, p { margin: 0; padding: 0; }
h1 { margin: 0.5em; }

li {
  margin-right: 0.5em;
  display: inline-block;
  background: #9f9;
  position: relative;
  vertical-align: bottom;
}

li div {
  margin: 1em;
  position: absolute;
  left: 0; bottom: 0;
}

Here’s a working demo: http://jsbin.com/obexew

I added a couple sample classes that assume a scale from 1 to 10, although it may be more practical to manually set the height as an inline style, or set it as a data attribute and update the height with JavaScript. I’ll leave that up to you to figure out and decide.

Keeping the description in the same element as the bar can be tricky, since it creates a situation where the columns are being aligned to an arbitrary point in each column. Without playing with it more, I would create a separate list for descriptions, and style it so it gets placed below the graph, like so:

<ul class="graph bars">
    <li><!-- stuff here --></li>
</ul>

<ul class="graph descriptions">
    <li><!-- description here --></li>
</ul>

And then modify the styles so that the coloring and position is applied within .bars, but also apply a fixed with to .graph li to align the bars and descriptions.

The complexity is completely dependent on how flexible you want your layout to be. I would recommend just diving in and seeing what you can achieve, and play with selectors and rules until you get the effect you need. I’ve been intentionally vague on some of these points so you get a chance to learn what works and what doesn’t.