0

I need to have 3 bootstrap columns with a border between each column, but my problem is that I can't make them same height.

Here's CSS my code...

div .column-lines div:first-child {
    border-right: 1px solid #a6b7bf;
    padding-right: 30px;
}

div .column-lines div:last-child {
    padding-left: 30px;
}

div .column-lines div:not(:first-child):not(:last-child) {
    border-right: 1px solid #a6b7bf;
    padding-right: 30px;
    padding-left: 30px;
}

Fiddle

Result:

enter image description here

And here's what I would like it to be:

enter image description here

How can I make the border same height (height of the heighst column)?

I do not want to use a table - if it's possible.

Thx

MojoDK
  • 4,410
  • 10
  • 42
  • 80
  • possible duplicate of [How can I make Bootstrap columns all the same height?](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) – omma2289 Aug 16 '14 at 18:01
  • also [this article](http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height) may be useful – omma2289 Aug 16 '14 at 18:02
  • What information is being displayed? If it's tabular data, then you *should use a table* :) – misterManSam Aug 16 '14 at 18:02

1 Answers1

0

You could try CSS something like:

.div{
    display: table;
}

div .column-lines {
    vertical-align: top;
    display: table-cell;
    float: none;
    border-right: 1px solid #a6b7bf;
}
Vivek Pratap Singh
  • 9,326
  • 5
  • 21
  • 34