making right aligned vertical tabs with foundation 4 framework?

Question

I'm absolutely flabbergasted and can't find any solution that even remotely seems to work!! I'm trying to make vertical tabs that will be on the right and the content will be on the left. I am using foundation 4 framework. Using the vertical-nav in their docs makes the tabs, but I can't seem to move them to the right. Any idea would be greatly appriciated. I'm using the code that is given in foundation docs: http://foundation.zurb.com/docs/components/section.html . see vertical nav.

A screenshot to show what I'm trying to achieve:http://i47.tinypic.com/246nmnr.jpg

Thanks a lot for help.

Answer 1

Put the content and the nav in columns. See example below and see it in action here. You will have to resize the "Result" area in jsfiddle to see the effect of columns.

<div class="row">
    <div class="small-12 large-9 columns">
        <p >This is your content area</p>
    </div>
    <div class="small-12 large-3 columns">
        <div class="section-container vertical-nav" data-section="vertical-nav" style="">
            <section class="section">
                <p class="title"><a href="#">Privacy Policy</a></p>                    
            </section>
            <section class="section">
                <p class="title"><a href="#">License agreement</a></p>                    
            </section>
            <section class="section">
                <p class="title"><a href="#">DMCA</a></p>                    
            </section>
            <section class="section">
                <p class="title"><a href="#">Proprietary Notices</a></p>                    
            </section>
            <section class="section">
                <p class="title"><a href="#">Trademarks</a></p>                    
            </section>           
        </div>
    </div>
</div>