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

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>

<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.

<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>

Email codedump link for Table layout of divs where the left border isn&#39;t even in height