Question

Here is my css and html

#header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background-image: url('/public/images/header.png');
    background-repeat: repeat-x;
}

#nav {
    background: transparent;
    height: 2.5em;
    left: -25px;
    list-style: none;
    margin: 1em 0 1em;
    min-width: 100%;
    min-height: 100%;
    overflow: hidden;
    padding: 60px 0 30px 0;
}

#nav a {
    color: white;
    display: block;
    float: left;
    height: 2.5em;
    padding-left: 30px;
    text-decoration: none;
    padding-right: 30px;
    text-shadow: 0.1em 0.1em #333;
}

#nav a:hover {
    text-shadow: 0.1em 0.1em white;
    background-color: white;
    color: darkred;
    padding-bottom: 5px;
    text-shadow: 0.1em 0.1em lightgray;
}

#nav a:hover.active, #nav a.active {
    background-color: white;
    background-position: 0 -60px;
    color: darkred;
    text-shadow: 0.1em 0.1em lightgray;
    padding-bottom: 5px;
}

#nav li {
    float: left;
    margin: 0 8px 0 0;
 /* Spacing between tabs */;
}

#nav span {
    cursor: pointer;
    display: block;
    float: left;
    line-height: 1.5em;
    padding: .5em 5px 0 0;
}


<div id="header">
    <div id="navigation">
        <ol id="nav">
            <li><a id="overview" href="/overview"><span>Overview</span></a></li>
            <li><a id="analysis" href="/overview" class="active"><span>Analysis</span></a></li>
            <li><a id="dashboard" href="/dashboard"><span>My Dashboard</span></a></li>
            <li><a id="preferences" href="/overview"><span>Preferences</span></a></li>
            <li><a id="contact" href="/overview"><span>Contact</span></a></li>
            <li><a id="logout" href="/overview"><span>Sign In</span></a></li>
        </ol>
    </div>
</div>

This looks fine on my screen but if I start resizing the window it makes the tabs jump around and go to the next line. I’ve found that on other sites with tabs this is not the case. What am I doing wrong here? Thanks.

Answer 1

These “other sites” probably have their <div id="header"> contained in another element, such as <div id="container">, with an explicit width set with CSS, such as width: 960px:

See: http://jsfiddle.net/mBJQN/

<div id="container">
    YOUR HTML HERE
</div>

#container {
    width: 960px;
    position: relative
}

I added position: relative so that the position: absolute on #header will be relative to #container (see here).

---

There is another option here, but it’s probably not the one you’re after.

You can add white-space: nowrap to #header, and change from floats to display: inline-block. If this is the option you want, let me know, because it needs a little more work.

http://jsfiddle.net/mBJQN/1/