如何讓元素留在容器內？

示例代碼在這裏http://jsfiddle.net/BLrKd/。如果水平縮短頁面，搜索框將移動到頁面頂部的標題之外。我怎樣才能使所有元素保持在標題中？如何讓元素留在容器內？

基本上我試圖使一個頭像行爲像stackoverflow。對於stackoverflow，如果您使頁面變小，標題元素將保留在標題中，並且不會向上或向下移動。

這裏是在殼體的jsfiddle代碼不工作

<body> 
    <div id="header"> 
     <div id="page-nav" > 
      <a id="login" href="/login">login</a> 
      <form id="search-form" action="search.py" method="get"> 
       <input id="searchbox" type="text" name="q" placeholder="search"/> 
      </form> 
     </div> 
    </div> 
</body>

這裏是CSS

body { 
    margin: 0; 
    padding: 0; 
} 
#header { 
    background-color: #015367; 
    overflow:hidden; 
    height: 50px; 
    /*border-style:solid;*/ 
} 

#login { 
    color: #b92c2c; 
    font-size: 1.25em; 
    float: left; 
    margin-left: 10em; 
    margin-top: 16px; 
    text-decoration: none; 
    /*border-style:solid;*/ 
} 
#page-nav 
{ 
    float: right; 
    margin-right: 13em; 
    /*border-style:solid;*/ 
    /*border-color:white;*/ 
} 

#search-form { 
    float: right; 
    margin-left: 0.5em; 
    margin-right: 1em; 
    margin-top: 16px; 
    /*border-style:solid;*/ 
    /*border-color:yellow;*/ 
}

來源

2013-02-09 bab

只要指定的最小寬度：

#header{ 
    min-width: 720px; /* or whatever the size of the content is */ 
}

（並移除溢出屬性，不需要）

來源

2013-02-09 02:56:22

如何讓元素留在容器內？

回答

相關問題