user3163539
user3163539

Reputation: 3

Trouble nesting grids with Zurb-Foundation

I've been trying to accomplish this using Foundation, and despite trying in many different ways I just can't get it to work. The goal:

My closest attempt so far:

 <div class="row">
        <div class="small-6 columns">
            <div class="row">
                <div class="small-6 columns">
                    <div class="small-12 columns" id="block1">
                        <h4>Block 1</h4>
                    </div>
                    <div class="small-12 columns" id="block3">
                        <h4>Block 3</h4>
                    </div>
                </div>
            </div>


            <div class="small-6 columns" id="block2">
                <h4>Block 2</h4>
            </div>
        </div>  

    <div class="small-6 columns right" id="introBlock">
        <h4>Intro<h4>
    </div>
</div>

Upvotes: 0

Views: 37

Answers (1)

David Nguyen
David Nguyen

Reputation: 8528

each nested column must be contained in a row div, you are missing a row div after

<div class="row">
    <div class="small-6 columns">
        <div class="row">
            <div class="small-6 columns">

Upvotes: 1

Related Questions