Sniipe Sniipe - 1 month ago 10
CSS Question

Table layout of divs where the left border isn't even in height

I have a container div with 4 inner

div
s. how to make the
border-left
grow to the height of the largest inner
div
?

When the page is wide enough all is fine, but when making the browser narrower then the first inner
div
floats to multiple rows which is fine but the other divs don't match it.



.container
{
float:left;
border: 1px solid #D1D1D1;
width:100%;
}

.cell{
float:left;
width:24%; /*interesting, x4 25% of a container will not work for 1 row when a boarder comes into play*/
border-left: 1px solid #D1D1D1;
}

<div class="container">
<div class="cell">blah that is too big to fit inside a div that is 25% when the browser is a sensible size...this is made to be very very long... too long, the hope is that it will spill onto two or more rows. The problem is that the border left for the other divs are for 1 row</div>
<div class="cell">blah</div>
<div class="cell">blah</div>
<div class="cell">blah</div>
</div>





jsfiddle: https://jsfiddle.net/Sniipe/nomey5b2/

Answer

Use flex instead of float.

Pay attention to the browser support.

.container
{
  float:left;
  border: 1px solid #D1D1D1;
  width:100%;
  display: flex;
}

.cell{  width:24%; /*interesting, 4 25% of a container will not work for 1 row when a boarder comes into play*/
  border-left: 1px solid #D1D1D1;
}
<div class="container">
  <div class="cell">blah that is too big to fit inside a div that is 25% when the browser is a sensible size...this is made to be very very long... too long, the hope is that it will spill onto two or more rows.  The problem is that the border left for the other divs are for 1 row</div>
  <div class="cell">blah</div>
  <div class="cell">blah</div>
  <div class="cell">blah</div>
</div>

If you want to support older browsers you can use display: table-cell.

.container
{
  float:left;
  border: 1px solid #D1D1D1;
  width:100%;
}

.cell{  width:24%; /*interesting, 4 25% of a container will not work for 1 row when a boarder comes into play*/
  border-left: 1px solid #D1D1D1;
  display: table-cell;
}
<div class="container">
  <div class="cell">blah that is too big to fit inside a div that is 25% when the browser is a sensible size...this is made to be very very long... too long, the hope is that it will spill onto two or more rows.  The problem is that the border left for the other divs are for 1 row</div>
  <div class="cell">blah</div>
  <div class="cell">blah</div>
  <div class="cell">blah</div>
</div>