1

I have a grid which in this examples has 4 coloumns (width:25%). This is fine however I need the columns to be equal height. The content will be loaded in dynamically so I can't set a fixed height.

I have implemented flexbox and while this solves the height problem, it seems to ignore the percentage widths.

Below is my code and here is a link to the codepen... http://codepen.io/anon/pen/CEHgo

HTML 

<div class="row">
  <div class="col3">
    <div class="box">Lorem ipsum</div>
  </div>
  <div class="col3">
    <div class="box">Lorem ipsum</div>
  </div>
  <div class="col3">
    <div class="box">Lorem ipsum</div>
  </div> 
</div>

CSS

* {box-sizing:border-box}

.row {
margin-left: -1%;
margin-right: -1%;
margin-bottom: 1em;
display:flex;
}
.row:before,.row:after {
content: " ";
display: table;
}

.row:after {
clear: both;
}

.col3 {
position: relative;
float: left;
padding-left: 1%;
padding-right: 1%;
width:25%;
display:flex;
}

.box {
background:#ccc;
padding:15px;
margin-bottom:15px;
}

How can I get equal height coloumns whilst still respecting the column widths?

Thanks in advance

Adam
  • 1,439
  • 8
  • 29
  • 47
  • 1
    add `flex-wrap: wrap;` to `.row` - http://codepen.io/anon/pen/cjkgw – Anonymous Oct 02 '14 at 11:07
  • Thanks for this, I just found this out also as soon as you said it! It seems to almost work, however by doing this, for some reason, the top row has 3, but the bottom row has 4 http://codepen.io/anon/pen/inomL - It seems to miss out the 4th column on row 1 – Adam Oct 02 '14 at 11:09

2 Answers2

2

Add flex-wrap: wrap; to .row and add width: 0; to the .row:before, .row:after to fix the 4th column position on Google Chrome.

JSFiddle - DEMO

.row {
    margin-left: -1%;
    margin-right: -1%;
    margin-bottom: 1em;
    display:flex;
    flex-wrap: wrap;
}
.row:before, .row:after {
    content:" ";
    display: table;
    width: 0; /* Fix for Google Chrome */
}
Anonymous
  • 10,002
  • 3
  • 23
  • 39
0

Your code could be vastly cleaned up. Using flexbox completely emliminates the need for floats and clearfixes. Check out the code below:

* {box-sizing:border-box}

.row {
    margin-left: -1%;
    margin-right: -1%;
    margin-bottom: 1em;
    display:flex;
    flex-wrap: wrap;
}

.col3 {
    padding-left: 1%;
    padding-right: 1%;
    width:25%;
    display: flex;
}

.box {
  background:#ccc;
  padding:15px;
  margin-bottom:15px;
}

Demo: http://codepen.io/anon/pen/yswnG

2507rkt3
  • 21,311
  • 1
  • 18
  • 15
  • Well that's hardly a "vast" improvement. Plus what about browsers that don't support flexbox? The website I am working on cannot afford to use flexbox yet for layout – Adam Oct 02 '14 at 15:57
  • 3
    considering you tagged your question with 'flexbox' and you were using flexbox properties in your initial code, i was assuming you were planning on using it? – 2507rkt3 Oct 02 '14 at 20:13