jquery scroll and css help

Question

Ok so this is my basic setup:

<ul id="sortable_tabs">
     <li id="tabs_sort" class="tab_link">
          <div id="sort_tabs" class="tab_link_text">Text here</div>
          <div id="close_tab" class="close_tab">
               <img class="close_image" src="css/images/close.png" />
          </div>
     </li>
</ul>

These are basically tabs with text and a close image. Here is my css

#sortable_tabs {
    display:inline;
    list-style-type: none;
    margin:0;
    min-width:20px;
    max-width:80%;
    height:35px;
    float:left;
    overflow:hidden;
}

#tab_links {
    margin-left: 5px;
    height: 35px;
}

.tab_link {
    width: 110px;
    text-align: center;
    float:left;
    height: 35px;
}

.tab_link_text {
    cursor:default;
    float:left;
    width:80px;
}

.close_tab {
    width: 20px;
    float: left;
}

Now what i am trying to do is create button that will scroll them left to right, which i have already done with this code:

$(".tab_link").each(function(){
 $(this).css("position","relative");
 $(this).animate({"left": "-=100px"});
});

now the problem is this once the tabs go past that 80% they jump down to the next line which i dont understand. i have the overflow set to hidden, display inline and the height set to 35px which is the size of the tabs. i need it set to 80% because there are links next to it that will take up the other 20%. So the tabs are moving left and right the problem is that the ones that arent in the initial view are moved below them and are never able to be seen. I used firebug to find out where they were. Any help is appreciated as to how to keep them inline.

Answer 1

A common way to solve this problem (not sure if it's the only solution) is to style an inner element to be the full width of the tabs. You could do this via JS by adding up the tab widths, margins, and paddings, or you could set a CSS size that represents the maximum possible tab size.

(Edit: rewritten to use wrapper DIV)

<div id="sortable_tabs_wrapper">
    <ul id="sortable_tabs">
         <li id="tabs_sort" class="tab_link">
              <div id="sort_tabs" class="tab_link_text">Text here</div>
              <div id="close_tab" class="close_tab">
                   <img class="close_image" src="css/images/close.png" />
              </div>
         </li>
    </ul>
</div>

#sortable_tabs_wrapper {
    min-width:20px;
    max-width:80%;
    height:35px;
    overflow:hidden;
}

#sortable_tabs {
    list-style-type: none;
    margin:0;
    width:2000px;
    height:35px;
    float:left;
}