CODEWITHSUNDEEP
htmltwitter-bootstrap-3gridzurb-foundationgrid-system
C.Brn
C.Brn

Reputation: 143

Foundation - Grid structure System issue

I am struggling with a specific grid structure that I want, here is what I want :

What i Want

Firstly I divided a line in two (6-6) corresponding to "1" and "4". Then using the "1", I add a new row "2" and "3". Using the "4", I add a row to generate "5" and "6". But here is my issue, I do not understand being on the "5", why I can not have a " 5' " output... I know that would be more simple to add an independent row from "5" but I want to bind "5" and "5'" together (as 1 and "2+3" are)

Here is my code :

    <div class="row">
    <div class="container">
        <div class="large-6 columns"> <!-- left part-->
            <div class="row">
                <div class="large-12 columns" style="height:500px;overflow:auto;backgroud:black"> <!-- 1 -->
                </div>
             </div>
            <div class="row">
                    <div class="large-9 columns" style="height:70px;backgroud:black"> <!-- 2 -->
                    </div>
                    <div class="small-3 columns text-center" style="height:70px;backgroud:blue"> <!-- 3 -->
                    </div>
            </div>
         </div>
        <div class="large-6 columns"> <!-- right part -->
            <div class="row">
                <div class="large-12 columns" style="position:relative;height:500px;background:black"> <!-- 4 -->
                </div>
            </div>

            <div class="row">
                <div class="large-5 columns no-collapse" style="height:35px;background: black"> <!-- 5 -->
                    <div class="row">
                        <div class="large-12 columns" style="height:35px;background: blue"> <!-- 5' -->
                        </div>
                    </div>
                <div class="large-7 columns no-collapse" style="height:70px;background: red"></div> <!-- 6 -->
            </div>
        </div>
    </div>
</div>

Any help would be appreciate, thank you.

Upvotes: 0

Views: 30

Answers (1)

tymothytym
tymothytym

Reputation: 1621

This rearranges your bottom right block to be as you show:

<div class="row">
    <div class="container">
        <div class="large-6 columns">
            <!-- left part-->
            <div class="row">
                <div class="large-12 columns" style="height:500px;overflow:auto;background:black">
                    <!-- 1 -->
                </div>
            </div>
            <div class="row">
                <div class="large-9 columns" style="height:70px;background:black">
                    <!-- 2 -->
                </div>
                <div class="small-3 columns text-center" style="height:70px;background:blue">
                    <!-- 3 -->
                </div>
            </div>
        </div>
        <div class="large-6 columns">
            <!-- right part -->
            <div class="row">
                <div class="large-12 columns" style="position:relative;height:500px;background:black">
                    <!-- 4 -->
                </div>
            </div>
            <div class="row">
                <div class="large-7 columns">
                    <div class="row">
                        <div class="large-12 columns" style="height:35px;background: blue">
                            <!-- 5 -->
                        </div>
                    </div>
                    <div class="row">
                        <div class="large-12 columns" style="height:35px;background: blue">
                            <!-- 5' -->
                        </div>
                    </div>
                </div>
                <div class="large-5 columns" style="height:70px;background: red">
                    <!-- 6 -->
                </div>
            </div>
        </div>
    </div>
</div>

A fiddle of this with borders to identify rows and columns

Upvotes: 1

Related Questions