Zurb Foundation: Prevent empty column collapsing to zero width

Question

Using Foundation, I sometimes have an empty column in a row, and that column gets collapsed entirely, engendering a mismatch between column data and column headers. Is there a way that I can prevent this collapse, making even empty columns get full width? (Is there a way besides inserting non-breaking spaces or other text into the otherwise empty columns?)

<div class="row">
  <div class="small-1 columns">Bruce</div>
  <div class="small-1 columns"></div> <!-- this gets collapsed to 0 width! -->
  <div class="small-1 columns">Dickinson</div>
</div>

Answer 1

Apply the following css:

.column, .columns{
  min-height: 1px;
}

Answer 2

You could add some pseudo content to the containing element to trigger rendering.

Markup:

<div class="row">
  <div class="column">
    <p class="middlename"></p>
  </div>
</div>

CSS:

.middlename:before {
  content: "\00a0";
  font-size: 0;
}

Answer 3

You can tag the last column (you are using) with "end".

 <div class="row">
  <div class="medium-3 columns">3</div>
  <div class="medium-3 columns">3</div>
  <div class="medium-3 columns end">3 end</div>
</div>