html - How can I make my left tab float left but fill the empty area to the other tabs which float right? -

i have bootstrap tabs, align right inside container:

https://jsfiddle.net/yc2dxnev/

this code:

<div class=container>     <ul id="tabs" class="tabs-right tabs">             <li class="banana active"><a>banana</a></li>             <li class="monkey"><a>monkey</a></li>             <li class="woods"><a>woods</a></li>         </ul> </div>  <style> ul.tabs {   display: block;   outline: none; }  ul.tabs {   list-style: none;   padding: 0;   margin: 0;   display: block;  }  ul.tabs>li {   display: inline-block;   position: relative;   margin-top: 5px;   margin-bottom: -1px; } 

what want keep tabs right , make left tab stick left, in same time fill area next tab. hard explain posted image:

http://s16.postimg.org/bhr4qzt51/002.jpg

i not know how achieve it, maybe know trick.

your right tabs should right, float them right using float:right;. since want have first list item filling whole space, have put @ end of ul , add overflow:hidden; it. code this:

<div class="container">     <ul id="tabs" class="tabs-right tabs" data-tabs="tabs" style="">         <li class="monkey"><a>monkey</a></li>         <li class="woods"><a>woods</a></li>         <li class="banana active"><a>banana</a></li> // move li item end     </ul> </div>  ul.tabs>li.active {     border-bottom-color: #fff;     background-color: #fff;     overflow:hidden; }  .monkey, .woods{     float:right; } 

have @ this fiddle.