Table layout and float left and bootstrap grid

Question

I have researched for this question, but did't get the satisfying answer. I am using bootstrap's grid layout.

Please look at the Fiddle here and resize the output window - while resizing you may have noticed that when widow size large enough to add col-sm- classes, my table layout breaks.

What I want is height of both column should be same when they are next to each other (height of largest element), and when they are top/bottom to each other, they should take their own height (which is working now).

HTML

<div class="container">
<div class="architect-table">
    <div class="row">
        <div class="cell column-1 col-xs-12 col-sm-6"> abcde </div>
        <div class="cell column-2 col-xs-12 col-sm-6"> abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde </div>
    </div>
</div>

CSS

.architect-table {
    display: table;
    width: 100%;
 }

.row {
     display: table-row;
}

.cell {
     display: table-cell;
     min-height: 44px;
     border: 1px solid black;
 }

However I know, if I remove float: left style, everything will work fine. But I can't as I want a bootstrap's grid layout. Any help would be appreciated.

Grasp

Answer 1

If flexbox is an option, you can make your row a wrapping flexbox - see demo below:

.architect-table {
  width: 100%;
}
.row {
  display: flex;
  flex-wrap: wrap;
}
.architect-table > .row > .cell {
  min-height: 44px;
  border: 1px solid black;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<div class="container">
  <div class="architect-table">
    <div class="row">
      <div class="cell column-1 col-xs-12 col-sm-6">abcde</div>
      <div class="cell column-2 col-xs-12 col-sm-6">abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde
        abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde</div>
    </div>
  </div>
</div>

Neediness

Best posible solution using flex on my opinion. – Urba

Answer 2

I'm sad to say but currently Bootstrap don't have this functionality, in case you want to have the same height on two cols when they are next each other you need to play with JS, there are some libraries that can help you, normally I use jQuery.matchHeight because is easy to use.

Best solution is don't use Bootstrap grid when you want this behavior and use flex :)

Urba

Answer 3

You can use flex. Please check this fiddle

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Cataldo

It is not a good idea to override all .row > [class*='col-'] with flex. :) – Urba

correct. It is just for his reference mean he may use some class. But what you said is right. Thanks. – Cataldo