Menu icon Foundation
Can you use stacked divs without rows in-between

I am still trying to fully understand the columns, rows and divs relationship.
In the below example there are two different ways to do a layout: Option 1 and Option 2.
I feel like Option 2 rows that I don't need but I am not sure.

It is also posted on codepen
http://codepen.io/4culture/pen/eNwPXq

Any guidance would be greatly appreciated

Option 1
<div class="row">
        <div class="medium-8 columns">
            <section class="medium-12 columns panel">
                <div>
                    <h1><a href="arts/index.htm">ARTS&nbsp;CREATIVITY</a></h1> 
                </div>
                <div class="medium-6 columns hide-for-small-only">
                    <p>Arts 4Culture funds individual artists, artist groups and arts organizations</p>
                </div>
                <div class="medium-6 columns">
                    <table>
                        <tr>
                            <td>9/12</td>
                            <td><a href="#">Deadline: Site Specific</a></td>
                        </tr>
                    </table>
                </div>
            </section>
            <section class="medium-12 columns panel">
                <div>
                    <h1><a href="arts/index.htm">ARTS&nbsp;CREATIVITY</a></h1> 
                </div>
                <div class="medium-6 columns hide-for-small-only">
                    <p>Arts 4Culture funds individual artists, artist groups and arts organizations</p>
                </div>
                <div class="medium-6 columns">
                    <table>
                        <tr>
                            <td>9/12</td>
                            <td><a href="#">Deadline: Site Specific</a></td>
                        </tr>
                    </table>
                </div>
            </section>
          </div>
        <section class="medium-4 columns panel">
            <h1><a href="pa/index.htm">PUBLIC ART</a></h1>
            <img src="http://placehold.it/600x400&amp;text=1" alt="" class="hide-for-small-only">
            <p>Public Art Collection</p>
            <div class="medium-12 columns">
                <table>
                    <tr>
                        <td>9/12</td>
                        <td><a href="#">Deadline: Meydenbauer Park</a></td>
                    </tr>
                </table>
            </div>
        </section>
</div>



Option 2
<div class="row">
        <div class="medium-8 columns">
            <div class="row">
                <section class="medium-12 columns panel">
                    <div class="row">
                        <div class="medium-12 columns">
                            <h1><a href="arts/index.htm">ARTS&nbsp;CREATIVITY</a></h1> 
                        </div>
                     </div>
                    <div class="row">
                        <div class="medium-6 columns hide-for-small-only">
                        <p>Arts 4Culture funds individual artists, artist groups and arts organizations </p>
                    </div>
                        <div class="medium-6 columns">
                            <table>
                                <tr>
                                    <td>9/12</td>
                                    <td><a href="#">Deadline: Site Specific</a></td>
                                </tr>
                            </table>
                        </div>
                     </div>
                </section>
             </div>
             <div class="row">
                <section class="medium-12 columns panel">
                    <div class="row">
                        <div class="medium-12 columns">
                            <h1><a href="arts/index.htm">ARTS&nbsp;CREATIVITY</a></h1> 
                        </div>
                     </div>
                    <div class="row">
                        <div class="medium-6 columns hide-for-small-only">
                        <p>Arts 4Culture funds individual artists, artist groups and arts organizations </p>
                    </div>
                        <div class="medium-6 columns">
                            <table>
                                <tr>
                                    <td>9/12</td>
                                    <td><a href="#">Deadline: Site Specific</a></td>
                                </tr>
                            </table>
                        </div>
                     </div>
                </section>
             </div>
          </div>
        <!--PA intro-->
        <section class="medium-4 columns panel">
            <h1><a href="pa/index.htm">PUBLIC ART</a></h1>
            <img src="http://placehold.it/600x400&amp;text=1" alt="" class="hide-for-small-only">
            <p>Public Art Collection</p>
            <div class="medium-12 columns">
                <table>
                    <tr>
                        <td>9/12</td>
                        <td><a href="#">Deadline: Meydenbauer Park</a></td>
                    </tr>
                </table>
            </div>
        </section>
</div>

Rowsnesting

I am still trying to fully understand the columns, rows and divs relationship.
In the below example there are two different ways to do a layout: Option 1 and Option 2.
I feel like Option 2 rows that I don't need but I am not sure.

It is also posted on codepen
http://codepen.io/4culture/pen/eNwPXq

Any guidance would be greatly appreciated

Option 1
<div class="row">
        <div class="medium-8 columns">
            <section class="medium-12 columns panel">
                <div>
                    <h1><a href="arts/index.htm">ARTS&nbsp;CREATIVITY</a></h1> 
                </div>
                <div class="medium-6 columns hide-for-small-only">
                    <p>Arts 4Culture funds individual artists, artist groups and arts organizations</p>
                </div>
                <div class="medium-6 columns">
                    <table>
                        <tr>
                            <td>9/12</td>
                            <td><a href="#">Deadline: Site Specific</a></td>
                        </tr>
                    </table>
                </div>
            </section>
            <section class="medium-12 columns panel">
                <div>
                    <h1><a href="arts/index.htm">ARTS&nbsp;CREATIVITY</a></h1> 
                </div>
                <div class="medium-6 columns hide-for-small-only">
                    <p>Arts 4Culture funds individual artists, artist groups and arts organizations</p>
                </div>
                <div class="medium-6 columns">
                    <table>
                        <tr>
                            <td>9/12</td>
                            <td><a href="#">Deadline: Site Specific</a></td>
                        </tr>
                    </table>
                </div>
            </section>
          </div>
        <section class="medium-4 columns panel">
            <h1><a href="pa/index.htm">PUBLIC ART</a></h1>
            <img src="http://placehold.it/600x400&amp;text=1" alt="" class="hide-for-small-only">
            <p>Public Art Collection</p>
            <div class="medium-12 columns">
                <table>
                    <tr>
                        <td>9/12</td>
                        <td><a href="#">Deadline: Meydenbauer Park</a></td>
                    </tr>
                </table>
            </div>
        </section>
</div>



Option 2
<div class="row">
        <div class="medium-8 columns">
            <div class="row">
                <section class="medium-12 columns panel">
                    <div class="row">
                        <div class="medium-12 columns">
                            <h1><a href="arts/index.htm">ARTS&nbsp;CREATIVITY</a></h1> 
                        </div>
                     </div>
                    <div class="row">
                        <div class="medium-6 columns hide-for-small-only">
                        <p>Arts 4Culture funds individual artists, artist groups and arts organizations </p>
                    </div>
                        <div class="medium-6 columns">
                            <table>
                                <tr>
                                    <td>9/12</td>
                                    <td><a href="#">Deadline: Site Specific</a></td>
                                </tr>
                            </table>
                        </div>
                     </div>
                </section>
             </div>
             <div class="row">
                <section class="medium-12 columns panel">
                    <div class="row">
                        <div class="medium-12 columns">
                            <h1><a href="arts/index.htm">ARTS&nbsp;CREATIVITY</a></h1> 
                        </div>
                     </div>
                    <div class="row">
                        <div class="medium-6 columns hide-for-small-only">
                        <p>Arts 4Culture funds individual artists, artist groups and arts organizations </p>
                    </div>
                        <div class="medium-6 columns">
                            <table>
                                <tr>
                                    <td>9/12</td>
                                    <td><a href="#">Deadline: Site Specific</a></td>
                                </tr>
                            </table>
                        </div>
                     </div>
                </section>
             </div>
          </div>
        <!--PA intro-->
        <section class="medium-4 columns panel">
            <h1><a href="pa/index.htm">PUBLIC ART</a></h1>
            <img src="http://placehold.it/600x400&amp;text=1" alt="" class="hide-for-small-only">
            <p>Public Art Collection</p>
            <div class="medium-12 columns">
                <table>
                    <tr>
                        <td>9/12</td>
                        <td><a href="#">Deadline: Meydenbauer Park</a></td>
                    </tr>
                </table>
            </div>
        </section>
</div>
Rafi Benkual over 4 years ago

Columns should not be directly nested within columns. This will cause odd padding issues. You should have a row in between if you are nesting.

I see you are nesting 12 columns within 12 columns which is a bit odd.

Anna Callahan over 4 years ago

I have edited the code and updated codepen. My main question is can i have a div without a columns class on line 3 and 19 (Option 1)

Or do I need to have two rows nested in the medium-8 columns div on line 56 and 74 (Option 2)

http://codepen.io/4culture/pen/eNwPXq

Thank you for your patience!

OPTION 1 
 <div class="row">
        <div class="medium-8 columns">
            <div>
                     <h1><a href="arts/index.htm">ARTS&nbsp;CREATIVITY</a></h1> 
                     <div class="row">
                        <div class="medium-6 columns hide-for-small-only">
                        <p>Arts 4Culture funds individual artists, artist groups and arts organizations </p>
                        </div>
                        <div class="medium-6 columns">
                            <table>
                                <tr>
                                    <td>9/12</td>
                                    <td><a href="#">Deadline: Site Specific</a></td>
                                </tr>
                            </table>
                        </div>
                     </div>
              </div>
              <div>
                     <h1><a href="arts/index.htm">ARTS&nbsp;CREATIVITY</a></h1> 
                     <div class="row">
                        <div class="medium-6 columns hide-for-small-only">
                        <p>Arts 4Culture funds individual artists, artist groups and arts organizations </p>
                        </div>
                        <div class="medium-6 columns">
                            <table>
                                <tr>
                                    <td>9/12</td>
                                    <td><a href="#">Deadline: Site Specific</a></td>
                                </tr>
                            </table>
                        </div>
                     </div>
              </div>
          </div>

        <!--PA intro-->
        <section class="medium-4 columns panel">
            <h1><a href="pa/index.htm">PUBLIC ART</a></h1>
            <img src="http://placehold.it/600x400&amp;text=1" alt="" class="hide-for-small-only">
            <p>Public Art Collection</p>
                <table>
                    <tr>
                        <td>9/12</td>
                        <td><a href="#">Deadline: Meydenbauer Park</a></td>
                    </tr>
                </table>
        </section>
</div>



OPTION 2
<div class="row">
        <div class="medium-8 columns">
            <div class="row">
                <section class="medium-12 columns">
                     <h1><a href="arts/index.htm">ARTS&nbsp;CREATIVITY</a></h1> 
                     <div class="row">
                        <div class="medium-6 columns hide-for-small-only">
                        <p>Arts 4Culture funds individual artists, artist groups and arts organizations </p>
                        </div>
                        <div class="medium-6 columns">
                            <table>
                                <tr>
                                    <td>9/12</td>
                                    <td><a href="#">Deadline: Site Specific</a></td>
                                </tr>
                            </table>
                        </div>
                     </div>
                </section>
             </div>
             <div class="row">
                <section class="medium-12 columns">
                     <h1><a href="arts/index.htm">ARTS&nbsp;CREATIVITY</a></h1> 
                     <div class="row">
                        <div class="medium-6 columns hide-for-small-only">
                        <p>Arts 4Culture funds individual artists, artist groups and arts organizations </p>
                        </div>
                        <div class="medium-6 columns">
                            <table>
                                <tr>
                                    <td>9/12</td>
                                    <td><a href="#">Deadline: Site Specific</a></td>
                                </tr>
                            </table>
                        </div>
                     </div>
                </section>
             </div>
          </div>
        <!--PA intro-->
        <section class="medium-4 columns panel">
            <h1><a href="pa/index.htm">PUBLIC ART</a></h1>
            <img src="http://placehold.it/600x400&amp;text=1" alt="" class="hide-for-small-only">
            <p>Public Art Collection</p>
                <table>
                    <tr>
                        <td>9/12</td>
                        <td><a href="#">Deadline: Meydenbauer Park</a></td>
                    </tr>
                </table>
        </section>
</div>

Rafi Benkual over 4 years ago

You will have better results by adding the .row between nested columns. This will prevent odd float issues on content that is varying heights.

Anna Callahan over 4 years ago

Thank you Rafi, I have a clearer understanding now.