css фиксированный переполнение заголовка?

У меня есть следующий код:css фиксированный переполнение заголовка?

<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>

И вот 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>

Проблема у меня в том, что если я уменьшить окно достаточно мал, ссылки в #nav начинают исчезать (или если переполнение не скрыто, оно переходит в следующую строку). Я не могу указать ширину для #nav, поскольку мне нужно, чтобы фон расширялся на 100%. Есть ли легкое решение для этого? Еще одна небольшая проблема, можно ли сделать так, чтобы, если окно сжималось достаточно мало, div h1 и #members не перекрываются? Спасибо за любые предложения!

источник

2012-06-16 Drew