Foundation big spaces on columns if the side column height is long

Question

Good day guys. I've been trying for hours now regarding this problem. I wanted to achieve the large column position as stated below but I'm getting something else.

   medium               large                 What I get

[    A    ]  |  [    A    ][         ]  |  [    A    ][         ]
 ---------   |   --------- [    B    ]  |             [    B    ]
[    B    ]  |  [         ][         ]  |             [         ]
 ---------   |  [    C    ] ---------   |   ---------  ---------
[    C    ]  |  [         ][    D    ]  |  [         ][    D    ]
 ---------   |  [         ]             |  [    C    ]
[    D    ]  |                          |  [         ]
             |                          |  [         ]

As you can see there is a large gap between A and C in the large screen. I wanted that C to go up and take that blank spaces without using any hacks as much as possible.

Here is the code that I have tried.

<div class="row profile align-top">
    <div id="A" class="column small-12 large-8">
        .....
    </div>

    <div id="B" class="column small-12 large-4">
        ....
    </div>

    <div id="C" class="column small-12 large-8">
        ....
    </div>

    <div id="D" class="column small-12 large-4">
        .....
    </div>
</div>

Thanks guys!

Edit:

Adds jfiddle example: https://jsfiddle.net/k18zw694/2/

@C.Schubert here it the fiddle. https://jsfiddle.net/k18zw694/2/ .. Thanks! — Angelo Ab, Feb 05 '16 at 13:45

score 0 · Answer 1 · answered Feb 05 '16 at 14:13

0

Ok you have to do it different. Nest the columns in other columns one left and one right.

   <div class="left column small-12 large-6"><!-Content here--></div> 
   <div class="right column small-12 large-6"><!-Content here--></div>

Updated fiddle

answered Feb 05 '16 at 14:13

C.Schubert

2,034
16
20

In mobile, the order on your fiddle is A,C,B,D. I wanted it to be A,B,C,D. – Angelo Ab Feb 05 '16 at 15:04
I recommend asking a new question. So that this is answered and people can work on the other fix because that will require some javasascript – C.Schubert Feb 05 '16 at 15:26

score 0 · Answer 2 · answered Feb 15 '16 at 10:56

You need to use visibility classes. I've prepared you the solution but I've replaced large with medium . It was necessary because in JSfiddle we can't set the viewport to large.

You have to use this html beside of your existing row:

<div class="row show-for-medium">
    <div class="medium-8 columns">
        <div class="row">
            <div id="A" class="column">
                <h1>
                  A
                </h1>
            </div>
        </div>
        <div id="C" class="column">
            <h1>
              C<br>C<br>C<br>C<br>
            </h1>
        </div>
    </div>
    <div class="medium-4 columns">
        <div id="B" class="column">
            <h1>
              B<br>B<br>B
            </h1>
        </div>
        <div id="D" class="column">
            <h1>
              D
            </h1>
        </div>
    </div>
</div>

for being clear, check this example and the solution on JSfiddle: https://jsfiddle.net/linkers/fea3evce/2/

score 0 · Answer 3 · answered Feb 15 '16 at 11:17

Assuming you want to retain the column order and that there would be more columns added later on, you'll have to use a column stacking library like Masonry, Isotope or Packery to acheive what you want.

These library will automatically position columns to fill the whitespace made by the taller previous column pushing the next row. Otherwise it's not directly achievable using css (aside from absolute positioning them, or maybe flexbox) and is not a problem with Zurb Foundation.

Foundation big spaces on columns if the side column height is long

3 Answers3