Stacks in Foundation 6

Question

I'm trying to achieve something in Foundation 6 and I can't figure it out. Here's a graphic illustrating my issue.

I do! Sorry about that :)

<!-- Signup / Login / FAQ / Social -->
<div class="row">

    <!-- Left Side -->
    <div class="large-4 medium-4 columns Rem1MarginBottom hide-for-small-only">
        <!-- Have a friend-->
        <h4 class="georgiaNormal">Text Column</h4>
    </div>
    <div class="large-2 medium-2 columns" style="border: 1px solid;">
        <h4 class="georgiaBold"><a href="#">Link 1</a></h4>
    </div>
    <div class="large-2 medium-2 columns" style="border: 1px solid;">
        <h4 class="georgiaBold"><a href="#">Link 2</a></h4>
    </div>
<!-- Left Side -->

<!-- Right Side -->
    <div class="large-4 medium-4 columns">
        <div class="row" style="border: 1px solid;">
            <div class="large-12 medium-12 columns hide-for-small-only">
                <h4 class="georgiaBoldSmall centeredRed trouble">Text</h4>
            </div>

            <div class="large-12 medium-12 columns hide-for-small-only">
                <h4 class="georgiaNormalSmall centeredRed faq_contact">Text <a href="#">Link</a> page or <a href="#">Link</a>.
</h4>
            </div>
            <div class="large-12 medium-12 small-12 columns Rem1MarginTop text-center Rem1MarginBottom">
                <img src="https://picturethismaths.files.wordpress.com/2016/03/fig6bigforblog.png" width="50" alt="#" />&nbsp;<img src="https://picturethismaths.files.wordpress.com/2016/03/fig6bigforblog.png" width="50" alt="#" />
            </div>
    </div>
    </div>
    <!-- Right Side -->
</div>

Try to show us what you have tried and the code that you have. Stack overflow isn't a place to ask for code, but to rather ask questions about the existing code that you have. Do you have the code to show us? — Brett East, Aug 23 '16 at 02:14

score 0 · Accepted Answer · answered Aug 23 '16 at 05:55

Thanks for adding the code. What you have is four columns, but what you really want is three columns and for some content to stack in the middle column. Try doing this to the left side give this a try:

<!-- Signup / Login / FAQ / Social -->
<div class="row">

    <!-- Left Side -->
    <div class="large-6 medium-6 columns Rem1MarginBottom hide-for-small-only">
        <!-- Have a friend-->
        <h4 class="georgiaNormal">Text Column</h4>
    </div>
    <div class="large-2 medium-2 columns" style="border: 1px solid;">
        <div><!-- this div should stack now -->
            <h4 class="georgiaBold"><a href="#">Link 1</a></h4>
        </div>
        <div><!-- this div will be below the other link -->
            <h4 class="georgiaBold"><a href="#">Link 2</a></h4>
        </div>
    </div>
    <!-- Left Side -->

    <!-- Right Side -->
    ...
    <!-- Right Side -->
</div>

I changed the first column to be '6' wide and removed what you did have as the third column (the one that contained your second link).

So now the middle column contains two divs and they will stack on top of each other. You may need to add some custom css to get the design you're after, but at least now you have the correct structure.

This is prefect, thank you! My main goal was to be able to pin Link 1 to the top of the containing div and Link 2 to the bottom of the containing div. Can this be done with this solution here? — Geekless, Aug 23 '16 at 07:25
@Geekless There would be a number of ways for you to pin the link to the top or bottom of the div, but it is completely dependent on exactly where you want it and other factors. That would be outside the scope of this question, and you should look through other questions on stackoverflow or online to see how to do that. If you are happy with the answer, then could you please choose it as the solution and upvote it. Thanks. — Brett East, Aug 25 '16 at 05:33

Stacks in Foundation 6

1 Answers1