Menu icon Foundation
Nested Rows Larger Than Parent

I'm having a small but very annoying problem where any rows that are nested become larger than their parent (1st child +26, 2nd +56, 3rd +86, etc). My HTML below shows that (as far as i know) I'm not doing anything wrong structurally. I haven't touched any CSS save for some height definitions.

<body>

    <header class="row">
    <div class="row">
        Header
    </div>
    </header>

    <div class="row" id="content">
        <div class="large-3 columns" id="sidebar">
        </div>

        <div class="large-9 columns">
            <div class="row" id="container">
                Container
            </div>
        </div>
    </div>

    <footer class="row">
        Footer
    </footer>

</body>
            

         

Nestedrow

nestedgridrow

I'm having a small but very annoying problem where any rows that are nested become larger than their parent (1st child +26, 2nd +56, 3rd +86, etc). My HTML below shows that (as far as i know) I'm not doing anything wrong structurally. I haven't touched any CSS save for some height definitions.

<body>

    <header class="row">
    <div class="row">
        Header
    </div>
    </header>

    <div class="row" id="content">
        <div class="large-3 columns" id="sidebar">
        </div>

        <div class="large-9 columns">
            <div class="row" id="container">
                Container
            </div>
        </div>
    </div>

    <footer class="row">
        Footer
    </footer>

</body>
            

         

Nestedrow
Rafi Benkual over 5 years ago

Couple things that may help.

You had a rows inside of rows without columns defined.

Finally, it is a general consensus that it is better to use classes rather than id's.

I made a codepen with your code cleaned up a bit. http://cdpn.io/bxfiI . This should help you moving forward.

Click edit pen to see code.

Brandon Arnold over 5 years ago

You're putting rows inside of rows, this creates a problem because row's have negative margin on the left and right to account for the padding on the columns.

rows, should never be nested without columns inside.

Your code should look like this

 <header class="row">
    <div class="small-12 columns">
        Header
    </div>
    </header>

    <div class="row" id="content">
        <div class="large-3 columns" id="sidebar">
        </div>

        <div class="large-9 columns">
            <div class="row" id="container">
                Container
            </div>
        </div>
    </div>

    <footer class="row">
        <div class="small-12 columns">
            Footer
        </div>
    </footer>

Morgan Heijdemann over 5 years ago

That works. Thanks Rafi and Brandon!