CODEWITHSUNDEEP
htmlcss
1252748
1252748

Reputation: 15372

Make three tabs fill width of container

I am trying to make three "tabs" fill the entire width of a larger container div, but the width always falls a few pixels short, or if I increase the width of the tabs, the last is pushed onto a lower level. Also, would li elements be more appropriate for building these tabs? I'm using bootstrap if so if you know of a built-in solution it has, I'm very willing to go for that.

JSBIN

<!--HTML-->
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 <div class="vendor_container"> 
<div class="vendor_header">
  <span>
     Company
  </span>
</div>

<div class="vendor_tabs">  
  <div class="vendor_tab vendor_contacts">
    Contacts
  </div>
  <div class="vendor_tab vendor_clients">
    Clients
  </div>
  <div class="vendor_tab vendor_notes">
    Notes  
  </div>
     <div class="clear"></div>
</div>  
<div class="vendor_pane vendor_contacts">
  <table class="detail_table contacts">
     <thead>
        <tr>
           <th>
              Name
           </th>
           <th>
              email
           </td>
           <th>
              Phone
           </th>
        </tr>
     </thead>
     <tbody>
        <tr>
           <td>
              Dave Sample
           </td>
           <td>
              [email protected]
           </td>
           <td>
              555.123.1234
           </td>
           <td>
              <a href="#" class="edit_contact">
              Edit
              </a>
           </td>
        </tr>
        <tr>
           <td>
              Jill Sample
           </td>
           <td>
              [email protected]
           </td>
           <td>
              555.123.1234
           </td>
           <td>
              <a href="#" class="edit_contact">
              Edit
              </a>
           </td>
        </tr>
        <tr>
           <td>
              Irene Sample
           </td>
           <td>
              [email protected]
           </td>
           <td>
              555.123.1234
           </td>
           <td>
              <a href="#" class="edit_contact">
              Edit
              </a>
           </td>
        </tr>
     </tbody>
  </table>  

</div>

<div class="vendor_pane vendor_contacts">
  <table class="detail_table vendor_clients">
     <thead>
        <tr>
           <th>
              Client
           </th>
           <th>
              ID
           </th>
        </tr>
     </thead>
     <tbody>
        <tr>
           <td>
              Sample 1
           </td>
           <td>
              1234
           </td>
        </tr>
        <tr>
           <td>
              sample 2
           </td>
           <td>
              9874
           </td>
        </tr>
     </tbody>
  </table>  
</div>  

<div class="vendor_pane vendor_notes">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>



</body>
</html>

/CSS/

body{
  margin:5px;
}
.vendor_container{
  width: 100%;
  max-width:1040px;
}
.vendor_header{

}
.vendor_header, .vendor_tab, th{
  text-align:center;
}
.vendor_tab{
  float:left;
  width:33%;
  padding: 5px 0 12px;
  border-color: gray;
  border-style:solid;
  border-width:1px 1px 0 0;
}
.vendor_tab:first-of-type{
  border-left-width:1px;
}
.border_left{
  border-left-width: 1px;
}
.clear{
  clear:both;
}
.vendor_pane ~.vendor_pane{
  display:none;
}
.vendor_pane table{
  width:100%;
}
.vendor_pane{
  width:100%;
  border:1px solid gray;
}

Upvotes: 0

Views: 1600

Answers (2)

haxxxton
haxxxton

Reputation: 6442

Bootstrap includes a "justified" option under the nav-tabs section.

Have a look at the documentation here. However, if you'd prefer to just use their CSS.

*{
    box-sizing:border-box;
}
.vendor_tab{
    display: table-cell;
    width: 1%;
    padding: 5px 0 12px;
    border-color: gray;
    border-style:solid;
    border-width:1px 1px 0 0;
}

JSFiddle Demo

PS. tabified your HTML

Upvotes: 1

SW4
SW4

Reputation: 71160

It's because your tabs are set to 33%, 3*33% =99% not 100%, the gap you see is the remaining 1%.

To fix the width issue change:

.vendor_pane {
  width: 99%;
  border: 1px solid gray;
  box-sizing: border-box;
}

Alternatively, make your tab widths 33.33..%, although this may introduce rendering nuances.

You should also set box-sizing:border-box on .vendor-tab so they dont move onto two lines on smaller widths.

Upvotes: 0

Related Questions