Positioning an element with CSS

Question

Oh, that awkward moment when I feel I have no clue how CSS works...

I am trying to layout a Kanban board in CSS. A board contains columns which in turn contain tasks. Schematically, it's as simple as:

where a board is a div, a column is a div, and a task is a div with some paragraphs.

I am trying to make the columns full-height, and this is where I am getting a problem — for some reason the columns containing tasks get pushed all the way towards the bottom of the page (while columns without tasks don't).

Here is a CodePen link with an example of this behavior: http://codepen.io/anon/pen/jbOBrj.

(and the css code, since SO insists that links to codepan have to be accompanied by code):

html, body{
  height: 100%;
}

#app{
  height: 100%;
}

.board{
  background: silver;
  width: 100%;
  height: 100%;
}

.column{
  display: inline-block;
  margin: 0 0.5em;
  background: gray;
  width: 20%;
  height: 100%;
}

.task{
  background: yellow;
  width: 90%;
  margin: auto;
  padding: 0.2em;
  text-align: center;
}

Could you please suggest how to correct this? Preferably, without using floats.

(If you could also explain why this is happening, that would make me so happy. I am very much puzzled by this behavior.)

Yes, I think you are right, the link you provided gives both the answer and a detailed explanation. — azangru, Sep 01 '15 at 00:33
@showdev: do I need to remove this question (if so, how?) or can it stay? — azangru, Sep 01 '15 at 00:42
*(and the css code, since SO insists that links to codepan have to be accompanied by code)* ... only because links don't always last, and if the question relies solely on the link, then it loses it's value when the link dies.. — Michael Benjamin, Sep 01 '15 at 01:01
@azangru No, it can stay. I find your question useful. For more information, see [Should I delete my question if it is marked as a duplicate?](http://meta.stackoverflow.com/questions/265736/should-i-delete-my-question-if-it-is-marked-as-a-duplicate) — showdev, Sep 01 '15 at 16:02

score 1 · Accepted Answer · answered Sep 01 '15 at 00:29

1

Read up on how inline-blocks are aligned and then add vertical-align:top; to your .column class to fix your problem

http://codepen.io/anon/pen/XmWgjG

answered Sep 01 '15 at 00:29

Jon P

19,442
8
49
72

Thank you! I actually thought of vertical-align and tried it, but I think I applied it to the parent div. When applied to `.column`, it works perfectly. Thank you! – azangru Sep 01 '15 at 00:31

Positioning an element with CSS

1 Answers1