title: Make three tabs fill width of container
body: <p>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 <code>li</code> 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.</p>
  
  <p><a href="http://jsbin.com/tadekeyi/2/edit" rel="nofollow">JSBIN</a></p>
  
  <pre><code>&lt;!--HTML--&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://code.jquery.com/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"&gt;&lt;/script&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;div class="vendor_container"&gt; 
  &lt;div class="vendor_header"&gt;
    &lt;span&gt;
       Company
    &lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="vendor_tabs"&gt;  
    &lt;div class="vendor_tab vendor_contacts"&gt;
      Contacts
    &lt;/div&gt;
    &lt;div class="vendor_tab vendor_clients"&gt;
      Clients
    &lt;/div&gt;
    &lt;div class="vendor_tab vendor_notes"&gt;
      Notes  
    &lt;/div&gt;
       &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;  
  &lt;div class="vendor_pane vendor_contacts"&gt;
    &lt;table class="detail_table contacts"&gt;
       &lt;thead&gt;
          &lt;tr&gt;
             &lt;th&gt;
                Name
             &lt;/th&gt;
             &lt;th&gt;
                email
             &lt;/td&gt;
             &lt;th&gt;
                Phone
             &lt;/th&gt;
          &lt;/tr&gt;
       &lt;/thead&gt;
       &lt;tbody&gt;
          &lt;tr&gt;
             &lt;td&gt;
                Dave Sample
             &lt;/td&gt;
             &lt;td&gt;
                dsample@sample.com
             &lt;/td&gt;
             &lt;td&gt;
                555.123.1234
             &lt;/td&gt;
             &lt;td&gt;
                &lt;a href="#" class="edit_contact"&gt;
                Edit
                &lt;/a&gt;
             &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
             &lt;td&gt;
                Jill Sample
             &lt;/td&gt;
             &lt;td&gt;
                jsample@sample.com
             &lt;/td&gt;
             &lt;td&gt;
                555.123.1234
             &lt;/td&gt;
             &lt;td&gt;
                &lt;a href="#" class="edit_contact"&gt;
                Edit
                &lt;/a&gt;
             &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
             &lt;td&gt;
                Irene Sample
             &lt;/td&gt;
             &lt;td&gt;
                isample@sample.com
             &lt;/td&gt;
             &lt;td&gt;
                555.123.1234
             &lt;/td&gt;
             &lt;td&gt;
                &lt;a href="#" class="edit_contact"&gt;
                Edit
                &lt;/a&gt;
             &lt;/td&gt;
          &lt;/tr&gt;
       &lt;/tbody&gt;
    &lt;/table&gt;  
  
  &lt;/div&gt;
  
  &lt;div class="vendor_pane vendor_contacts"&gt;
    &lt;table class="detail_table vendor_clients"&gt;
       &lt;thead&gt;
          &lt;tr&gt;
             &lt;th&gt;
                Client
             &lt;/th&gt;
             &lt;th&gt;
                ID
             &lt;/th&gt;
          &lt;/tr&gt;
       &lt;/thead&gt;
       &lt;tbody&gt;
          &lt;tr&gt;
             &lt;td&gt;
                Sample 1
             &lt;/td&gt;
             &lt;td&gt;
                1234
             &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
             &lt;td&gt;
                sample 2
             &lt;/td&gt;
             &lt;td&gt;
                9874
             &lt;/td&gt;
          &lt;/tr&gt;
       &lt;/tbody&gt;
    &lt;/table&gt;  
  &lt;/div&gt;  
  
  &lt;div class="vendor_pane vendor_notes"&gt;
    &lt;p&gt;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.&lt;/p&gt;
  &lt;/div&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>/<em>CSS</em>/</p>
  
  <pre><code>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;
  }
  </code></pre>