Menu icon Foundation
Tabs to cover full length of Div

Is it possible to have tabs, so they cover the full length of a div, and then divide each tab equally, so they are the same size?

I have a large-8 column, and I would like to add 3 tabs, but it looks a little odd having three with a large space. Not looking to hack any CSS, just asking if its possible with the CSS already available ?

Thanks in advance

<div class="large-8 column">
        <dl class="tabs" data-tab>
            <dd class="active"><a href="#panel1">My Questions</a></dd>
            <dd><a href="#panel2">My Comments</a></dd>
            <dd><a href="#panel3">My Votes</a></dd>
        </dl>
        <div class="tabs-content">
            <div class="content active" id="panel1">
                <p>Questions by User</p>
            </div>
            <div class="content" id="panel2">
                <p>Comments by User </p>
            </div>
            <div class="content" id="panel3">
                <p>Votes by User</p>
            </div>
        </div>


    </div>
            

         

tabscss

Is it possible to have tabs, so they cover the full length of a div, and then divide each tab equally, so they are the same size?

I have a large-8 column, and I would like to add 3 tabs, but it looks a little odd having three with a large space. Not looking to hack any CSS, just asking if its possible with the CSS already available ?

Thanks in advance

<div class="large-8 column">
        <dl class="tabs" data-tab>
            <dd class="active"><a href="#panel1">My Questions</a></dd>
            <dd><a href="#panel2">My Comments</a></dd>
            <dd><a href="#panel3">My Votes</a></dd>
        </dl>
        <div class="tabs-content">
            <div class="content active" id="panel1">
                <p>Questions by User</p>
            </div>
            <div class="content" id="panel2">
                <p>Comments by User </p>
            </div>
            <div class="content" id="panel3">
                <p>Votes by User</p>
            </div>
        </div>


    </div>
            

         
Esa Rantanen almost 5 years ago

Hello Andrew,

F3 had a feature for sizing the tabs evenly in a container:
http://foundation.zurb.com/docs/v/3.2.5/tabs.php

Couldn't find the docs for this feature on F4/F5 though.

Andrew Walker almost 5 years ago

Perfect. Thank you for that. I just had to take this line from F3 css:

.tabs.three-up dt, .tabs.three-up dd, .tabs.three-up li { width: 33.33%; }

And it worked a treat.

Thanks again.