Question

I would like to list links in a single line and hide anything that does not fit within browser width. In the end I would like to have a single div that is always on top of overflowing links. How can I achieve this?

Here’s demo on dablet.com, resize the browser window to see what I mean.

HTML markup:

<div class="bar">
    <a href="">item</a>
    …
    <a href="">item</a>
    <a href="">item</a>

    <div class="more">
        <a href="">more items...</a>
    </div>
</div>

CSS styles:

.bar {
    font-size: 12px;
    height: 16px;
    margin: 0 0 5px;
    overflow:hidden;
}

.bar a:link,
.bar a:visited {
    background-color: #b3d4ae;
    border-radius: 5px;
    color: #003300;
    padding: 0 3px 15px 3px;
}

.more {
    float: right;
}

Answer 1

The result is: (demo on dabblet.com)

I change list of anchors in your markup to ul it is more semantic and good practice in web development

HTML markup:

<div class="bar">
    <ul>
        <li><a href="#">link01</a></li>
        <li><a href="#">link02</a></li>
        <li><a href="#">link03</a></li>
        …
        <li><a href="#">link20</a></li>
    </ul>
    
    <div class="more">
        <a href="">more items...</a>
    </div>
</div>

CSS styles:

.bar {
    font-size: 12px;
    height: 16px;
    overflow: hidden;
    position: relative;
    /* .more width + ~15px to prevent half-visible links */
    padding-right: 83px;
}

.bar ul { margin: 0; }

.bar ul li {
    background-color: #b3d4ae;
    border-radius: 5px;
    color: #003300;
    padding: 0 3px;
    float: left;
}

.bar ul li a,
.bar ul li,
.more,
.more a {
    height: 16px;
    line-height: 16px;
    display: inline-block;
}

.bar ul li + li {
    margin-left: 6px;
}

.more {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #fff;
    padding: 0 5px;
    box-shadow: -5px 0 5px #fff;
    /* fixed width for example */
    width: 70px;
    text-align: center;
}