Question

I am using Foundation CSS to create some contained tabs. http://foundation.zurb.com/docs/ui.php#simpleContained1

Since I need many divs inside the tab content I am placing the divs inside li elements. Is div inside list allowed?

But the div does not get contained inside the border of tab content. It goes outside it. How can we make the border to contain the divs.

I am including a bit of code

<dl class="tabs contained">
  <dd><a href="#simpleContained1" class="active">Operators and Set Operartors</a></dd>
  <dd><a href="#simpleContained2">Greek Letters and Other Symbols</a></dd>
  <dd><a href="#simpleContained3">Operations and Arrows</a></dd>
</dl>

   <ul class="tabs-content contained">
        <li class="active" id="simpleContained1Tab">

                        <div id="add" class="lib-item">
                          Add
                        </div>

                        <div id="subtract" class="lib-item">
                          Sub
                        </div>

                        <div id="multiply" class="lib-item">
                          Mul
                        </div>

                        <div id="divide" class="lib-item">
                          Div
                        </div>

                        <div id="plusorminus" class="lib-item">
                          Plus or minus
                        </div>

                        <div id="lessthan" class="lib-item">
                          Less than
                        </div>

                        <div id="greaterthan" class="lib-item">
                          Greater Than
                        </div>

                        <div id="lessthanorequalto" class="lib-item">
                          Less than / Erual to
                        </div>

                        <div id="equalto" class="lib-item">
                          Equal to
                        </div>

                        <div id="approximately" class="lib-item">
                          Approx
                        </div>

                        <div id="notequalto" class="lib-item">
                          Not equal to
                        </div>

                        <div id="setunion" class="lib-item">
                          Union
                        </div>

                        <div id="subset" class="lib-item">
                         Subset
                        </div>

                        <div id="superset" class="lib-item">
                          Superset
                        </div>

                        <div id="propersubset" class="lib-item">
                          Proper Subset
                        </div>

                        <div id="propersuperset" class="lib-item">
                          Proper Superset
                        </div>

                        <div id="inset" class="lib-item">
                          Inset
                        </div>

                        <div id="notinset" class="lib-item">
                          Not Inset
                        </div>

                        <div id="forall" class="lib-item">
                          For All
                        </div>

                        <div id="exists" class="lib-item">
                          Exists
                        </div>

                        <div id="emptyset" class="lib-item">
                          EmptySet
                        </div>                    

                        <div id="setcontains" class="lib-item">
                          Set Contains
                        </div>

                       </li>

                      <li id="simpleContained2Tab">This is simple tab 2's content. Now you see it!

                      </li>
                      <li id="simpleContained3Tab">This is simple tab 3's content. It's, you know...okay.

                      </li>              
   </ul>

lib-item is class I have written to just arrange the contents inside the tab content area.

It is like this

.lib-item{
 float:left;
 background-color:#CCC;
 width:100px;
 text-align:center;
 margin:5px;
}

This is how the result looks now

http://tinypic.com/view.php?pic=118n4e8&s=6

Answer 1

Here is the Example

Put all divs under one main div (buttons_backdiv). Before close the main div we have to clear the float. So add one div with class clearfloat.

Operators and Set Operartors

Greek Letters and Other Symbols

Operations and Arrows

    <div class="buttons_backdiv"> //main div opening
                    <div id="add" class="lib-item">
                      Add
                    </div>

                    <div id="subtract" class="lib-item">
                      Sub
                    </div>

                    <div id="multiply" class="lib-item">
                      Mul
                    </div>

                    <div id="divide" class="lib-item">
                      Div
                    </div>

                    <div id="plusorminus" class="lib-item">
                      Plus or minus
                    </div>

                    <div id="lessthan" class="lib-item">
                      Less than
                    </div>

                    <div id="greaterthan" class="lib-item">
                      Greater Than
                    </div>

                    <div id="lessthanorequalto" class="lib-item">
                      Less than / Erual to
                    </div>

                    <div id="equalto" class="lib-item">
                      Equal to
                    </div>

                    <div id="approximately" class="lib-item">
                      Approx
                    </div>

                    <div id="notequalto" class="lib-item">
                      Not equal to
                    </div>

                    <div id="setunion" class="lib-item">
                      Union
                    </div>

                    <div id="subset" class="lib-item">
                     Subset
                    </div>

                    <div id="superset" class="lib-item">
                      Superset
                    </div>

                    <div id="propersubset" class="lib-item">
                      Proper Subset
                    </div>

                    <div id="propersuperset" class="lib-item">
                      Proper Superset
                    </div>

                    <div id="inset" class="lib-item">
                      Inset
                    </div>

                    <div id="notinset" class="lib-item">
                      Not Inset
                    </div>

                    <div id="forall" class="lib-item">
                      For All
                    </div>

                    <div id="exists" class="lib-item">
                      Exists
                    </div>

                    <div id="emptyset" class="lib-item">
                      EmptySet
                    </div>                    

                    <div id="setcontains" class="lib-item">
                      Set Contains
                    </div>
     <div class="clearfloat"></div> //div float clear
     </div> //main div closing
                   </li>

                  <li id="simpleContained2Tab">This is simple tab 2's content. Now you see it!

                  </li>
                  <li id="simpleContained3Tab">This is simple tab 3's content. It's, you know...okay.

                  </li>              

​

Css is:

.buttons_backdiv { width:100%;}
.clearfloat { clear:both;}