Question

I have the following code:

<div id="header">
  <h1>HEADER TEXT</h1>
  <div id="members">
    <form action="" method="post">
    <input type="text" value="Search this site" />
    </form>
    <a href="#">Member Login</a>
    </div>
  <div id="nav">
  <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
    </div>
</div>
<div id="main">

</div>
</body>

And here’s the CSS:

<style>
body {
    font-family:Verdana, Geneva, sans-serif;
    font-size: 16px;
    background-color: #EEE;
    color: #111;
    margin: 0;
    padding: 0;
}
h1 {
    display:inline;
    margin:0;
    padding:0;
    color:#000;
}
#header {
    position:fixed;
    width:100%;
    min-width:100%;
    background-color:#EEE;
}
#members {
    position:absolute;
    right:.5em;
    bottom:3em;
    margin: 0;
    padding: 0;
}
#members form {
    display: inline;
    margin: 0;
    padding: 0;
}
#nav {
    border-bottom:1px solid #3d5086;
    font-size:13px;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bold;
    height: 3.5em;
    border-top: 1px solid #7683c4;
    background-color: #44529C;
    width: 100%;
    min-width: 100%;
    overflow: hidden;
}
#nav ul {
    padding:0;
    margin:0;
}
#nav li {
    display:inline;
    list-style-type:none;
    margin:0;
    cursor:pointer;
    border-left: 1px solid #7085ba;
    border-right: 1px solid #3d5086;
    float: left;
    height: 2.5em;
    padding-top: 1em;
    text-shadow: 1px 1px 1px #111;
}
#nav li:hover {
    background-color:#5a64b3;
    color:#FFF;
}
#nav a {
    padding: 1.6em;
    color: #EEE;
    text-decoration: none;
}
#main {
    background:#FFF;
    width: 1000px;
    height: 1000px;
    margin: 0 auto;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
</style>

The problem I’m having is that if I shrink the window small enough, the links in #nav start disappearing (or if overflow isn’t hidden, it gets pushed down to the next line). I can’t specify a width for the #nav as I need the background to extend 100%. Is there an easy fix for this? Another small problem, is it possible to make it so that, if the window shrinks small enough, the h1 and #members div don’t overlap? Thanks for any suggestions!

Answer 1

try setting min-width to the minimum size by which it still displays normal.