Menu icon Foundation
How should I create row borders?

New to Foundation and wondering what I'm missing.

If I add a border to the bottom of of a row, it extends out past the edges of the column content due to the columns' use of padding. If I add a border to the bottom of each column I end up with breaks in the border due to the gutter.

So how should I add a border that runs between two rows with the width of the column content?

The s I can see requires whole extra row/column pair which seems a high price for a single line and isn't even necessarily using the hr tag for what it is intended:

Both solutions require whole extra row/column pair which seems a high price for a single line:

<div class="row">
  <div class="large-12 columns">
    <div class="row">
      <div class="large-8 columns">
       </div
       <div class="large-4 columns">
      </div>
    </div>
    <hr>
  </div>
</div>

<div class="row">
   <div class="large-8 columns">
   </div
   <div class="large-4 columns">
   </div>
 </div>
<div class="row">
  <div class="large-12 columns">
     <hr>
   </div>
</div>

         

gridrowborder

New to Foundation and wondering what I'm missing.

If I add a border to the bottom of of a row, it extends out past the edges of the column content due to the columns' use of padding. If I add a border to the bottom of each column I end up with breaks in the border due to the gutter.

So how should I add a border that runs between two rows with the width of the column content?

The s I can see requires whole extra row/column pair which seems a high price for a single line and isn't even necessarily using the hr tag for what it is intended:

Both solutions require whole extra row/column pair which seems a high price for a single line:

<div class="row">
  <div class="large-12 columns">
    <div class="row">
      <div class="large-8 columns">
       </div
       <div class="large-4 columns">
      </div>
    </div>
    <hr>
  </div>
</div>

<div class="row">
   <div class="large-8 columns">
   </div
   <div class="large-4 columns">
   </div>
 </div>
<div class="row">
  <div class="large-12 columns">
     <hr>
   </div>
</div>

         
Rafi Benkual over 5 years ago

I made a codepen that has your rows with a bottom-border http://cdpn.io/odsxl (click edit pen to see code).

Pedr over 5 years ago

Hi Rafi,

The whole purpose of my question is to find a way to add a bottom border that extends to the width of the row content, not the row. Each column has left and right padding, meaning that that any border on the bottom of a row extends past the edges of the left and right-most columns by the column padding.

See my Code Pen (based on yours) here: http://codepen.io/anon/pen/raDxh

As you can see, the blue bottom border extends past the paragraph edges. I am looking for an efficient way to add a border that runs the width of the column content, now the row.

Joseph DeVenuta over 5 years ago

Pedr - woulding adding left/right padding to the row give you the desired result?

Rafi Benkual over 5 years ago

You need the columns to be equal height for that to work the way you want.

Upgrading to Foundation 5.1 will allow you to use the Equalizer http://foundation.zurb.com/docs/components/equalizer.html