I'm trying to make a webpage for my clients to be able to preview their catalogs and I need to be able to separate the items by category, so I used bootstrap for the tabs, however, these previews are generated dynamically, so some catalogs may have a lot of categories. However the div container that has the tabs doesn't seem to want to adjust to my tabs div, I need this div to stay always on sight so I added an absolute position to it, but ever since I added it, the container started ignoring its size and it looks horrible. Here's my code:

```
<style>
    body {
        font-family: 'Arial Narrow', sans-serif;
        text-transform: uppercase;
    }
    #content {
        min-height: 500px;
    }
    img {
        max-height: 160px;
    }
    .product-list {
        margin-right: 0px;
    }
    .tabs-left>.nav-tabs>li>a {
        max-width: 100px;
    }
    .product-list {
        margin-left: 50px;
        width: 720px;
    }
    .tab-content {
        overflow: auto;
        margin-left: 150px;
    }
    h3 {
        font-size: 20px;
        line-height: 20px;
    }
    .tabs-left>.nav-tabs {
        position: fixed;
    }
</style>

```

And this is how the navs would look like:

```
<html>
    <div id="content">
        <div class="tabbable tabs-left"> 
            <ul class="nav nav-tabs">
                <li class="active"><a href="#122" data-toggle="tab">Category 1</a></li>
                <li><a href="#116" data-toggle="tab">Category 2</a></li>
            </ul>
        </div>
        <div class="tab-pane" id="122"><div class="product-list"></div></div>
        ...
    </div>
</html>

```

Any help will be much appreciated!