Question

In my web page a have a div where I put some tabs.

The problem is that on low resolution (like projector) or if I minimize the size of the browser, the tabs from right side are disappearing one by one…

The div which contains all these tabs has this CSS:

.graMainMenuTabsSubPanel {
    display: inline-block;
    height: 51px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-left: 50px;
    position: relative;
    width: 95%;
}

and each tab has the following css on it:

.graMainMenuTabSelected {
    background: url("../images/external/bg-tab-active.png") no-repeat scroll 0 0 transparent;
    display: block;
    float: left;
    font-weight: bold;
    height: 100%;
    margin-left: 2px;
    margin-right: 0;
    text-align: center;
    text-decoration: none;
    vertical-align: bottom;
    width: 170px;
}

Can you see the issue?

I supposed that I can fix somehow with min-width on the main div but it’s not working…

Answer 1

Changed the container div’s width to px instead of % and it works!